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

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

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

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

1
2
3
4

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));
		},
	});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

实现效果如下：点击右上角三点可实现其他方式打开