uniapp文件下载并预览

大概就是这样的咯,文件展示到页面上,点击文件下载并预览该文件; 

 通过点击事件handleDownLoad(file.path),file.path为文件的地址;

<view class="files">
    <view class="cont" v-for="(file, index) in dataInfo.experience" :key="index" @click="handleDownLoad(file.path)">
      <image
        :src="file.path.split('.')[1] == 'word' ? '/static/images/icons/icon_word.png' : '/static/images/icons/icon_pdf.png'"
        mode="scaleToFill"
      />
      <text>{{ file.filename }}</text>
    </view>
</view>

 功能代码:

// 文件下载
const handleDownLoad = (path: string) => {
  if (!path) return;
  Loading("加载中");
  uni.downloadFile({
    url: fullUrl(path),//完整地址
    success: res => {
      if (res.statusCode === 200) {
        uni.getFileSystemManager().saveFile({
          tempFilePath: res.tempFilePath,
          success: function (res1) {
            const savedFilePath = res1.savedFilePath;
            HideLoading();
            // 打开文件
            uni.openDocument({
              filePath: savedFilePath,
              success: function (res2) {
                console.log(res2);
              }
            });
          }
        });
      } else {
        Toast("下载失败", {
          icon: "error"
        });
      }
    }
  });
};

样式的话,大家根据自己需求写吧,我只功能代码展示出来就可以了;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/76060.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB 分片集群

在了解分片集群之前&#xff0c;务必要先了解复制集技术&#xff01; 1.1 MongoDB复制集简介 一组Mongodb复制集&#xff0c;就是一组mongod进程&#xff0c;这些进程维护同一个数据集合。复制集提供了数据冗余和高等级的可靠性&#xff0c;这是生产部署的基础。 1.1.1 复制集…

pip install mysql出现error: subprocess - exited-with-error的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

交叉编译基本概念

1 什么是交叉编译 1.1 本地编译 在解释什么是交叉编译之前&#xff0c;要先明白什么是本地编译。 本地编译可以理解为&#xff0c;在当前编译平台下&#xff0c;编译出来的程序只能放到当前的平台下运行&#xff0c;平时我们常见的软件开发都是属于本地编译。 比如我们在X8…

利用OpenCV光流算法实现视频特征点跟踪

光流简介 光流&#xff08;optical flow&#xff09;是运动物体在观察成像平面上的像素运动的瞬时速度。光流法是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在的对应关系&#xff0c;从而计算出相邻帧之间物体的运动信息的一种方法。…

突破防线!泛微OA任意文件上传Getshell

子曰&#xff1a;“巧言令色&#xff0c;鲜矣仁。” 漏洞复现 访问漏洞url&#xff1a; 存在漏洞的路径为 /weaver/weaver.common.Ctrl/.css?arg0com.cloudstore.api.service.Service_CheckApp&arg1validateApp漏洞利用&#xff1a; 漏洞证明&#xff1a; 文笔生疏&…

win11如何去掉桌面快捷方式的小箭头(原创)

begin 打开注册表,Windows搜索框里搜 注册表编辑器(register editor),打开.. 找到 接着跟进.. 新建一个项名, Shell Icons 继续.... 值设为29 双击开页面 输入数据 %windir%\System32\shell32.dll,-51 到此,保存,到桌面,小箭头还是没有消失 ctrl shift esc 打开 任务管理…

Java课题笔记~ 数据提交的方式

前四种数据注入的方式&#xff0c;会自动进行类型转换。但无法自动转换日期类型。 &#xff08;1&#xff09;单个数据&#xff08;基本数据类型&#xff09;注入 在方法中声明一个和表单提交的参数名称相同的参数&#xff0c;由框架按照名称直接注入。 &#xff08;2&#x…

Kafka API与SpringBoot调用

文章目录 首先需要命令行创建一个名为cities的主题&#xff0c;并且创建该主题的订阅者。 1、使用Kafka原生API1.1、创建spring工程1.2、创建发布者1.3、对生产者的优化1.4、批量发送消息1.5、创建消费者组1.6 消费者同步手动提交1.7、消费者异步手动提交1.8、消费者同异步手动…

优化 Linux 系统性能:探索 tuned 守护进程的调优配置文件

tuned守护进程调优系统调优配置文件从命令行配置系统调优安装、启用和启动tuned软件包tuned-adm 感谢 &#x1f496; hello大家好&#x1f60a; tuned守护进程调优系统 系统管理员可以基于多种用例工作负载来调整各种设备设置&#xff0c;以此优化系统性能。tuned 守护进程会利…

FreeRTOS(动态内存管理)

资料来源于硬件家园&#xff1a;资料汇总 - FreeRTOS实时操作系统课程(多任务管理) 目录 一、动态内存管理介绍 1、heap_1 2、heap_2 3、heap_3 4、heap_4 5、heap_5 二、动态内存总结与应用 1、heap_1 2、heap_4 3、heap_5 三、内存管理编程测试 1、heap_4 2、h…

第三方软件安全测评如何收费,安全测试包括哪些测试项?

近年来&#xff0c;随着全球范围内网络安全事件的频发&#xff0c;第三方软件安全测评的需求也日益增长。软件安全对于企业的重要性不言而喻&#xff0c;那么如何收费和可做测试项就成了企业最为关注的问题&#xff0c;小编将就以上问题作出以下简析。 一、第三方软件安全测评…

Electron基础篇

人生有些事,错过一时,就错过一世。 官网&#xff1a;简介 | Electron Electron-大多用来写桌面端软件 Electron介绍 Electront的核心组成是Chromium、Node.js以及内置的Native API&#xff0c;其中Chromium为Electron提供强大的UI能力&#xff0c;可以在不考虑兼容的情况下利…

阿里云服务器部署RabbitMQ流程

阿里云百科分享使用阿里云服务器部署RabbitMQ流程&#xff0c;RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff0c;用于在分布式系统中存储转发消息&#xff0c;有良好的易用性、扩展性和高可用性。本文介绍如何通过ECS实例部署Rabbi…

使用python读Excel文件并写入另一个xls模版

效果如下&#xff1a; 原文件内容 转化后的内容 大致代码如下&#xff1a; 1. load_it.py #!/usr/bin/env python import re from datetime import datetime from io import BytesIO from pathlib import Path from typing import List, Unionfrom fastapi import HTTPExcep…

【开发笔记】在Python中调用Docker,并运行SDK任务

目录 1 背景2 环境准备3 实现流程3.1 连接远程Docker3.1 创建容器3.2 解压SDK3.3 挂载容器卷3.4 运行任务3.5 判断任务状态3.6 容器的停止与销毁 4 可能遇到的问题 1 背景 使用Python&#xff0c;在远程Docker中创建一个容器&#xff0c;并在该容器中运行SDK任务 2 环境准备 …

Linux系列讲解 —— FTP协议的应用

简单介绍一下FTP文件传输协议在linux系统中的应用。 目录 0. 基本概念1. FTP Server1.1 安装FTP Server1.2 FTP Server开启和关闭1.3 查看FTP Server是否开启1.4 FTP服务器配置 2. FTP Client2.1 lftp2.2 ftp2.3 sftp2.4 文件资源管理器集成的ftp和sftp 3. ftp常用命令 0. 基本…

下一代计算:嵌入AI的云/雾/边缘/量子计算

计算系统在过去几十年中推动了计算机科学的发展&#xff0c;现在已成为企业世界的核心&#xff0c;提供基于云计算、雾计算、边缘计算、无服务器计算和量子计算的服务。现代计算系统解决了现实世界中许多需要低延迟和低响应时间的问题。这有助于全球各地的青年才俊创办初创企业…

如何安装Python?

如何安装Python&#xff1f; 安装Python非常简单&#xff0c;让我们一步步来进行。 1. 访问官方网站 首先&#xff0c;您需要访问Python官方网站&#xff08;https://www.python.org/&#xff09;。在首页上&#xff0c;您会看到一个大大的「Downloads」按钮&#xff0c;点击…

分布式 - 消息队列Kafka:Kafka消费者和消费者组

文章目录 1. Kafka 消费者是什么&#xff1f;2. Kafka 消费者组的概念&#xff1f;3. Kafka 消费者和消费者组有什么关系&#xff1f;4. Kafka 多个消费者如何同时消费一个分区&#xff1f; 1. Kafka 消费者是什么&#xff1f; 消费者负责订阅Kafka中的主题&#xff0c;并且从…

Python的变量命名规则是什么?

Python的变量命名规则 在Python中&#xff0c;变量是用来存储数据的&#xff0c;而变量命名是为了方便我们理解和引用这些数据。Python的变量命名规则相对灵活&#xff0c;但也有一些基本规则和约定&#xff0c;让我们一起来了解一下。 基本规则 只能包含字母、数字和下划线&…