在uni-app中使用pdf.js實現在手機上打開pdf

想要實現能夠在手機上預覽pdf，剛開始想着要不直接使用iframe嵌入pdf算了，結果發現，只有極個別手機能夠正常識別

所以最終還是使用了pdf.js來實現手機上pdf的預覽，看一下安卓的效果圖

如果是ios的就不用這麼麻煩了，直接在<web-view :src="src" ></web-view>中，將src設置爲pdf的路徑即可

下面是安卓的實現過程

<template>
	<view class="content"><web-view :src="url"></web-view></view>
</template>

<script>
export default {
	data() {
		return {
			// pdf.js的viewer.htm所在路徑
			// 注意：靜態的html文件需要放在根路徑下的 hybrid/html 文件夾中
			viewerUrl: '/hybrid/html/web/viewer.html',
			// 要訪問的pdf的路徑
			fileUrl: 'http://47.101.183.8:8088/test.pdf',
			// 最終顯示在web-view中的路徑
			url: ''
		};
	},
	onLoad() {
		// h5 和 安卓 都使用，使用h5訪問的時候記得跨域
		this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
		// 在安卓和ios手機上，取消下面的註釋即可
		// 判斷是手機系統：安卓，使用pdf.js
		// if(plus.os.name === 'Android') {
		// 	this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
		// }
		// // ios，直接訪問pdf所在路徑
		// else {
		// 	this.url = encodeURIComponent(this.fileUrl);
		// }
	},
	methods: {}
};
</script>

<style>
</style>

完整代碼見：

https://gitee.com/m_eve_admin/uni-app-pdf