前景:实现下载文档并且能够预览查看

注意：需要把下载的文件添加到白名单，此时需要添加到 downLoadFile合法域名

uni.saveFile- 保存文件到本地。

uni.saveFile(OBJECT)

uni.openDocument

uni.openDocument(OBJECT)

新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。

//打开文件-先下载，再打开
openFile() {
	uni.downloadFile({
		url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
		success: (response) => {
			console.log('response',response)
			if (response.statusCode === 200) {
				console.log('下载成功');
				// 保存文件到本地
				uni.saveFile({
					tempFilePath: response.tempFilePath,
					success: (resData) => {
						console.log('saveFile =====> resData',resData);
						// 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
						uni.openDocument({
							filePath: resData.savedFilePath,
							fileType: 'pdf', // 指定文件的格式
							showMenu: true, // 允许出现分享功能
							success: r => {
								console.log('openDocument ===> res',r)
							},
							fail: openError => {
								console.log('打开失败: ', openError)
							}
						})
					},
					fail: error => {
					console.log('error: ', error)
					}
				})
			}
		}
	});
}

最终沟通需求后，实现效果为，点击可预览即可，无需下载

• 文档的预览

//文件预览
previewFile(url,typeName) {
	console.log('e =====> 预览',url,'typeName',typeName);
	//支持预览的文件类型
	//微信小程序
	let fileType = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx' ]; 
	// if(!fileType.includes(typeName)) {
	//   return uni.showToast({
	//     title: '不支持预览当前文件类型',
	//     icon: 'none'
	//   })
	// }
	uni.showLoading({
		title: '加载中',
		mask: true
	})
	//下载文件资源到本地
	uni.downloadFile({
		url: url,
		success: function(res) {
			console.log('downloadFile ==> ',res)
			uni.hideLoading();
			var filePath = res.tempFilePath;
			if(!fileType.includes(typeName)) {
				return false;
			}
			uni.showLoading({
				title: '正在打开',
				mask: true
			})
			// 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
			uni.openDocument({
				filePath: filePath,
				fileType: typeName,// 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx 
				// showMenu: true, // 允许出现分享功能
				success: res => {
					uni.hideLoading();
					console.log('打开文档成功',res);
				},
				fail: openError => {
					uni.hideLoading();
					console.log('fail:' + JSON.stringify(openError));
				}
			});
		},
		fail: function(err) {
			uni.hideLoading();
			console.log('fail:' + JSON.stringify(err));
		}
	});
},

• 图片的预览

//预览图片
previewImg(imgUrl) {
	console.log('imgUrl',imgUrl);
	// 预览图片
	uni.previewImage({
		urls: [ imgUrl ],
		longPressActions: {
			// itemList: ['发送给朋友', '保存图片', '收藏'],
			success: function(data) {
				//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			},
			fail: function(err) {
				console.log(err.errMsg);
			}
		}
	});
},
previewAll({ currentTarget: { dataset: { url, imgUrl, type } } }) {
	// el.type === 'png' || el.type === 'jpg' || el.type === 'jpeg'
	let fileType = ['png', 'jpg', 'jpeg'];
	console.log('fileType.includes(type)',fileType.includes(type));
	if(fileType.includes(type)) {
		this.previewImg(imgUrl);
	} 
	else {
		this.previewFile(url,type);
	}
}

<view class="right-item" :data-type="el.type" :data-url="el.url" :data-img-url="el.url" @tap="previewAll">
            <view class="dotted"></view>
			<view class="dotted"></view>
			<view class="dotted"></view>
</view>

参考文章

1、uniapp,实现下载文件，并保存到本地，打开文件预览

2、uni-app 小程序文件下载并分享

3、uni-app 微信小程序中打开预览pdf文件

4、跨平台（uni-app）文件在线预览解决方案

5、文件下载保存， 遇到uni.downloadFile的坑

转自：uni-app文档、图片预览查看