uniapp实现小程序预览、保存、转发pdf/word/excel等文件

最新推荐文章于 2025-03-01 16:52:11 发布

星野丶Z

最新推荐文章于 2025-03-01 16:52:11 发布

阅读量8.3k

点赞数 3

文章标签：小程序 vue.js 前端 uni-app

本文链接：https://blog.csdn.net/weixin_49256908/article/details/122616532

版权

本文介绍如何使用uni.downloadFile结合uni.openDocument实现文件下载及预览功能，无需使用uni.saveFile即可完成文件的下载与本地预览，并支持转发分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到uni.downloadFile结合uni.openDocument实现功能，无需uni.saveFile也能实现下载文件到本地
在这里插入图片描述
以上面的word文档为例，点击调用uni.downloadFile拿到指定文件下载后存储的路径 (本地路径)filePath，然后在调用uni.openDocument，设置showMenu属性为true，该属性是开启右上角是否有可以转发分享的功能，然后加上filePath属性，地址就是uni.downloadFile的filePath，此时点击右上角的三个点就可以转发保存文件了，此时功能就实现了，可以参考下面代码
在这里插入图片描述
代码如下：

previewFile(item) {
	uni.showLoading({
		title:'加载中'
	})
	uni.downloadFile({
	  url: item.value, //后端返回的文件地址
	  filePath: wx.env.USER_DATA_PATH + '/' + item.name + '.' + item.value.split('.')[item.value.split('.').length - 1],
	  success: function (res) {
		if (res.statusCode === 200) {
			uni.openDocument({
			  showMenu: true,
			  filePath: res.filePath,
			  success: function (res) {
				console.log(res,'打开文件成功')
			  },
			  fail: (err) => {
			  	uni.showToast({
			  		title:'打开文件失败请重试',
			  		icon:'none'
			  	})
			  }
			})
		} else {
			uni.showToast({
				title:'打开文件失败请重试',
				icon:'none'
			})
		}
		uni.hideLoading()
	  },
	  fail:(err) => {
		  uni.hideLoading()
		  uni.showToast({
		  	title: '加载失败请重试',
		  	icon:"none"
		  })
	  }
	})
}