uniapp文件下载并预览

news2024/12/24 9:14:49

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

 通过点击事件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"
        });
      }
    }
  });
};

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MD-MTSP:光谱优化算法LSO求解多仓库多旅行商问题MATLAB(可更改数据集,旅行商的数量和起点)

一、光谱优化算法LSO 光谱优化算法&#xff08;Light Spectrum Optimizer&#xff0c;LSO&#xff09;由Mohamed Abdel-Basset等人于2022年提出。 参考文献&#xff1a; [1]Abdel-Basset M, Mohamed R, Sallam KM, Chakrabortty RK. Light Spectrum Optimizer: A Novel Physi…

数据结构 — 时间复杂度、空间复杂度

前言 数据结构_空间复杂度_时间复杂度讲解_常见复杂度对比 本文介绍数据结构中的时间复杂度和空间复杂度 ***文章末尾&#xff0c;博主进行了概要总结&#xff0c;可以直接看总结部分*** 博主博客链接&#xff1a;https://blog.csdn.net/m0_74014525 点点关注&#xff0c;后期…

STL文件格式详解【3D】

STL&#xff08;StereoLithography&#xff1a;立体光刻&#xff09;文件是 3 维表面几何形状的三角形表示。 表面被逻辑地细分或分解为一系列小三角形&#xff08;面&#xff09;。 每个面由垂直方向和代表三角形顶点&#xff08;角&#xff09;的三个点来描述。 切片算法使用…

YOLOv5修改注意力机制CBAM

直接上干货 CBAM注意力机制是由通道注意力机制&#xff08;channel&#xff09;和空间注意力机制&#xff08;spatial&#xff09;组成。 传统基于卷积神经网络的注意力机制更多的是关注对通道域的分析&#xff0c;局限于考虑特征图通道之间的作用关系。CBAM从 channel 和 sp…

Opencv将数据保存到xml、yaml / 从xml、yaml读取数据

Opencv将数据保存到xml、yaml / 从xml、yaml读取数据 Opencv提供了读写xml、yaml的类实现&#xff1a; 本文重点参考&#xff1a;https://blog.csdn.net/cd_yourheart/article/details/122705776?spm1001.2014.3001.5506&#xff0c;并将给出文件读写的具体使用实例。 1. 官…

Android多渠道打包+自动签名工具 [原创]

多渠道打包自动签名工具 [原创] github源码&#xff1a;github.com/G452/apk-packer 如果觉得有帮助可以点个小星星支持一下&#xff0c;万分感谢&#xff01; 使用步骤&#xff1a; 1、在apk-packer.exe目录内放入打包需要的配置&#xff1a; 1&#xff09;签名文件.jks2&am…

undefined reference to `dlopen‘ ‘SSL_library_init‘ `X509_certificate_type‘

使用Crow的时候需要注意crow依赖asio依赖OpenSSL&#xff0c;asio要求1.22以上版本&#xff0c;我使用的是1.26.0&#xff1b; 这个版本的asio要求OpenSSL是1.0.2&#xff0c;其他版本我得机器上编不过&#xff0c;ubuntu上默认带的OpenSSL是1.1.1; 所以我下载了OPENSSL1.2.0重…

【Linux】TCP协议的相关实验——深入理解

TCP相关实验 理解CLOSE_WAIT状态 当客户端和服务器在进行TCP通信时&#xff0c;如果客户端调用close函数关闭对应的文件描述符&#xff0c;此时客户端底层操作系统就会向服务器发起FIN请求&#xff0c;服务器收到该请求后会对其进行ACK响应。 但如果当服务器收到客户端的FIN…

【LeetCode每日一题】——205.同构字符串

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 哈希表 二【题目难度】 简单 三【题目编号】 205.同构字符串 四【题目描述】 给定两个字符…

Appium - 移动端自动测试框架,如何入门?

Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门&#xff0c;那么我们就直奔主题。文章结构如下&#xff1a; 1、为什么要使用Appium&#xff1f; 2、如何搭建Appium工具环境?(超详细&#xff09; 3、通过demo演示Appium的使用 4、Appium如何…

【C++常见八股1】内存布局 | 参数压栈 | 构造析构调用 | 空类大小

内存布局 .text 代码段&#xff1a;存放二进制代码、字符串常量.data 段&#xff1a;存放已初始化全局变量、静态变量、常量.bss 段&#xff1a;未初始化全局变量&#xff0c;未初始化静态变量heap 堆区&#xff1a;new/malloc 手动分配的内存&#xff0c;需要手动释放stack 栈…

竞赛项目 深度学习图像风格迁移

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…

Redis_概述

1.redis概述 1.1 简介 截止到2021年12月 数据库排名https://db-engines.com/en/ranking redis(Remote Dictionary Server) 一个开源的key-value存储系统它支持存储的Value类型&#xff1a;包括String(字符串),list(链表),set(集合),zset(sorted set 有序集合),hash(哈希类型…

【C++11】列表初始化 | decltype操作符 | nullptr | STL的更新

文章目录 一.列表初始化1. 花括号初始化2. initializer_list 二.decltype三.nullptr四.STL的更新1.STL新增容器2.字符串转换函数3.容器中的一些新方法 一.列表初始化 1. 花括号初始化 { }的初始化 C98中&#xff0c;标准允许使用大括号{}对数组或者结构体元素进行统一的列表初…

Unity游戏源码分享-俄罗斯方块unity2017

Unity游戏源码分享-俄罗斯方块unity2017 工程地址&#xff1a; https://download.csdn.net/download/Highning0007/88204011

STM32 F103C8T6学习笔记3:串口配置—串口收发—自定义Printf函数

今日学习使用STM32 C8T6的串口&#xff0c;我们在经过学习笔记2的总结归纳可知&#xff0c;STM32 C8T6最小系统板上有三路串口&#xff0c;如下图&#xff1a; 今日我们就着手学习如何配置开通这些串口进行收发&#xff0c;这里不讲串口通信概念与基础&#xff0c;可以自行网上…

突破笔试:力扣全排列(medium)

1. 题目链接&#xff1a;46. 全排列 2. 题目描述&#xff1a;给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[…

Redis_安装、启动以及基本命令

2.Redis安装 2.1前置处理环境 VMware安装安装centOS的linux操作系统xshellxftp 2.2 配置虚拟机网络 按ctrlaltf2 切换到命令行 cd (/)目录 修改/etc/sysconfig/network-scripts/ifcfg-ens3 vi 命令 按insert表示插入 按ctrlesc退出修改状态 :wq 写入并退出 此文件必须保持一…

linux鲁班猫代码初尝试[编译镜像][修改根文件系统重编译]

编译镜像 官方百度云盘资料:https://doc.embedfire.com/linux/rk356x/quick_start/zh/latest/quick_start/baidu_cloud/baidu_cloud.html 解压虚拟机压缩包:"鲁班猫\8-SDK源码压缩包\开发环境虚拟机镜像\ubuntu20.04.7z"后既可以用VMware打开,打开后可以看到已经有…

探索数据之美:初步学习 Python 柱状图绘制

文章目录 一 基础柱状图1.1 创建简单柱状图1.2 反转x和y轴1.3 数值标签在右侧1.4 演示结果 二 基础时间线柱状图2.1 创建时间线2.2 时间线主题设置取值表2.3 演示结果 三 GDP动态柱状图绘制3.1 需求分析3.2 数据文件内容3.3 列表排序方法3.4 参考代码3.5 运行结果 一 基础柱状图…