uniapp开发微信小程序在线预览pdf等文件

        最近在开发一个微信小程序，有个需求就是需要点击按钮，在线预览合同文档。当时试了几种方法，都有不同的问题，最后方法二总算解决了。

1、方法1：不一定能成功（可做参考）

        最开始后端给我返的是一个base64文件流，处理之后使用的webView进行预览，要注意的是：Blob对象在uni-app中并不直接支持，所以就使用的uni-app提供的uni.arrayBufferToBase64()方法将Base64文件流数据进行转换。代码如下：

// 从后台获取的Base64文件流数据
let base64Data = 'Base64文件流数据';

// 将Base64文件流数据进行转换
let base64array = uni.base64ToArrayBuffer(base64Data);

// 将base64array转换为Base64字符串
let base64String = uni.arrayBufferToBase64(base64array);

// 将Base64字符串拼接一下用于PDF预览
this.pdfUrl = 'data:application/pdf;base64,' + base64String;

<template>
	<view>
		<web-view :src="pdfUrl "></web-view>
	</view>
</template>

        这种方法当初的确在微信开发者工具中可以实现成功预览，但我使用真机调试时，不知道为什么，就是加载不出，明明微信开发者工具中可以很流畅的使用，真机扫码在手机看就是不行。无奈只能换方法，所以此方法仅作参考，也有可能是我小程序或者手机问题，不过这个就不太清楚了。

2、方法2：开发者工具和真机调试都成功实现预览

        我本来是打算找插件的，后面我发现了uni有种自带的方法，就不需要用插件，更方便。

        后端后面处理了一下接口，给我返的数据就变成了这样，这种直接就能打开的链接：

        是不是以为这种链接用webView就可以直接打开了，然鹅并不，同样是微信开发者工具中运行没有问题，真机调试依旧加载不出。奇了怪了，我有时候真怀疑是我手机问题。最后直接用的这种方法uni.openDocument()，直接就能打开预览，不需任何插件，代码如下：

	viewContract() {
		let self = this;
		self._post('/index.php/merchant/downloadContract', {
			contractNo: self.orderData.detail.contractNo
		}, function(response) {
			self.previewWechat(response.data);

		});
	},
	//微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
	previewWechat(urlPdf) {
		uni.showLoading({
			title: '正在加载中..'
		})
		uni.downloadFile({
			url: urlPdf,
			success: function(res) {
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功');
						uni.hideLoading()
					},
				});
			},
			complete: function(r) {
				uni.hideLoading()
			}
		});
	},

<template>
	<view>
		<button class="primaryOne" @click="viewContract">查看</button>
	</view>
</template>

最后，效果图如下：