uniapp开发微信公众号 实现选择本地PDF及预览

需求 : 用户可以在手机上选择PDF上传及预览

实现方案: pdf.js 

1.下载pdf.js 

pdf.js官网           github进不去的可以用我这个百度云盘

2.解压拷贝到static目录下

3.创建一个预览pdf的页面 

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

<script>
	export default {
		data() {
			return {
				viewerUrl: '/static/pdf/web/viewer.html', //用来渲染PDF的html
				pdfUrl: '' // 最终显示在web-view中的路径
			}
		},
		onLoad(option) {
			this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(option.pdfUrl)}`;
		},
	}
</script>

4.选择pdf及传值

   1.选择文件     方法说明: uni-app官网

	uni.chooseFile({
				count: props.limitNum - fileArr.value.length, //默认100
				extension: ['.pdf'],
				success: function (res) {
                    const path =  res.tempFilePaths[1] //这个就是pdf临时blob
				}
	});

2.传值:

	//预览PDF  这里的path 就是上面选择文件的那个path
		function onPreviewPdf(path: string) {
			//浏览器端直接预览
			if ( uni.getSystemInfoSync().platform == 'windows') {
				uni.openDocument({
					filePath: path,
					success: (res) => { },
					fail(err) {}
				})
			} else {
				uni.navigateTo({
					url: '/pages/preview-pdf/preview-pdf?pdfUrl=' + path
				})
			}
		}

到这里流程就结束了, 但是部署到测试服务器,在微信开发者工具预览可能有以下问题:

1. .mjs文件找不到 如下: 

这是服务器的限制,  公司用的是IIS服务器, 设置如下:

2.pdf.js报错

这个时候其实已经配置好了, 在手机上打开连接就可以在线预览了