借助wx.openDocument(Object object)实现uniaapp小程序打开文件进行预览

在微信小程序中经常遇到对文件进行预览,或者转发、借助第三方应用打开的功能实现。需要借助wx.openDocument进行实现

1、定义html,点击之后进行预览

<view @click="view('文件网络地址')">
   《文件标题》
</view>

2、view实现,如果没有对不同手机系统的特殊要求,可以跳过view方法,直接执行openReport方法。
由于wx.openDocument需要一个本地地址,所以先借助wx.downloadFile生成一个tempFilePath临时本地路径。

view(index) {
	let pdfUrl = this.pdfUrlList[index];
	switch (uni.getSystemInfoSync().platform) {
		case 'android':
			console.log('安卓');
			// 这里直接调用原生的方法
			this.openReport(pdfUrl);
			break;
		case 'ios':
			console.log('IOS');
			this.openReport(pdfUrl);
			//这里跳转web-view页面
			// uni.navigateTo({
			//   url: `/pages/mine/my-report/detail?reportFileUrl=${item.reportFileUrl}`
			// });
			break;
		default:
			this.openReport(pdfUrl);
			break;
	}
},
openReport(url) {
	uni.showLoading({
		title: '加载中',
		mask: true,
	});
	wx.downloadFile({
		url: url,
		success: function (res) {
			uni.hideLoading();
			var filePath = res.tempFilePath;
			uni.showLoading({
				title: '正在打开',
				mask: true,
			});
			wx.openDocument({
				filePath: filePath,
				fileType: 'pdf',
				showMenu: true,
				success: function (res) {
					uni.hideLoading();
					console.log('打开文档成功');
				},
				fail: function (err) {
					uni.hideLoading();
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		fail: function (err) {
			uni.hideLoading();
			console.log('fail:' + JSON.stringify(err));
		},
	});
},

实现效果如下:点击右上角三点可实现其他方式打开
在这里插入图片描述

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
⼩程序下载⽂件并预览 需求分析 最近优化了个原先写过的需求,回头复习复习⼩程序的 API 是这样的,我需要下载⼀个⽂件并打开此⽂件 优化:记录是否被下载过,如果下载过就直接打开 获取⽂件下载链接,打开⽂件 wx.downloadFile({ url: `${pic.meetingUrl}/weixin/noticeStart/downLoad/${this.selectItem.recordId}`, // 下载资源的 url success: (res) => { wx.openDocument({ filePath: res.tempFilePath, // ⽂件路径,可通过 downloadFile 获得, fileType: 'pdf', // 写下载后的⽂件的格式,这⾥距离是pdf success: (res) => { }, fail: (error) => { }, }); }, fail: () => {}, complete: () => {}, }); 优化 思路:保存下载后的⽂件,保存其路径到本地缓存,然后下次打开的时候判断⼀下本地缓存⾥是否有,如果有就打开,本地缓存没有的话, 就先下载在打开。 const that = this; const cacheFilePath = wx.getStorageSync( `filePath-${this.selectItem.recordId}` ); // 先判断这个⽂件是否下载过 // 如果下载过,尝试通过缓存,打开⽂件 // 否则就要下载,下载成功后保存本地缓存(临时路径信息),命名规则为 filePath + recordId if (cacheFilePath) { wx.openDocument({ filePath: cacheFilePath, //⽂件路径,可通过 downFile 获得, fileType: this.selectItem.fileType, // 获取⽂件格式 success: (res) => { }, fail: (error) => { }, }); } else { wx.showLoading({ title: "下载中", mask: true, }); wx.downloadFile({ url: `${pic.meetingUrl}/weixin/noticeStart/downLoad/${this.selectItem.recordId}`, // 下载资源的 url success: (res) => { // 隐藏 loading wx.hideLoading(); // 下载成功后,保存⽂件路径到本地缓存 wx.setStorageSync( `filePath-${this.selectItem.recordId}`, `${res.tempFilePath}` ); // 尝试打开下载后的⽂件 wx.openDocument({ filePath: res.tempFilePath, //⽂件路径,可通过 downFile 获得, fileType: this.selectItem.fileType, // 获取⽂件格式 success: (res) => { }, fail: (error) => { }, }); }, fail: () => {}, complete: () => {}, }); }
如果您不想使用 `uni.openDocument` API 打开文件,您可以考虑使用其他方式打开文件,比如使用第三方插件或者自定义组件等。 以下是两个示例: 1. 使用第三方插件: 可以使用 uni-app 社区中的一些第三方插件来实现打开文件的功能,例如 `uni-file-picker` 插件。这个插件可以选择文件并返回文件的本地路径,您可以使用这个路径来打开文件。 安装插件: ``` npm install uni-file-picker --save ``` 使用插件: ```javascript import filePicker from 'uni-file-picker' // 选择文件 filePicker.chooseFile({ success: (res) => { // res.tempFilePaths 为文件的本地临时路径 // 这里可以使用自己的方式打开文件 } }) ``` 2. 自定义组件: 您可以自定义一个组件来实现打开文件的功能。在组件中,可以使用 `wx.chooseMessageFile` API 选择文件并返回文件的临时路径,然后使用 `wx.openDocument` API 打开文件。 组件示例: ```html <template> <button @click="openFile">打开文件</button> </template> <script> export default { methods: { openFile() { wx.chooseMessageFile({ count: 1, type: 'file', success: (res) => { wx.openDocument({ filePath: res.tempFiles[0].path, fileType: 'txt', success: () => { console.log('打开文件成功') }, fail: () => { console.log('打开文件失败') } }) }, fail: () => { console.log('选择文件失败') } }) } } } </script> ``` 注意:在使用 `wx.chooseMessageFile` 和 `wx.openDocument` API 时,需要将 `type` 和 `fileType` 参数设置为要打开的文件类型,这里以打开 txt 文件为例,需要将类型设置为 `file`,文件类型设置为 `txt`。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山为樽水为沼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值