uniapp在线预览pdf功能（手机端Web端皆适配）

前言：

uniapp实现在页面当中预览pdf功能，无需跳转。手机端Web皆可完美适配。下文中父页面为需要用户点击预览pdf的页面，子页面为展示pdf的页面

下载及安装

pdfjs-4.0.379-dist 点击即可下载

• 下载完成后在项目static文件夹中创建个pdf文件夹，将压缩包内容解压进去（注意！放置其他位置可能会出现不可预料的错误！！）

使用

子页面（用于展示pdf页面）

• page中创建个vue页面，用于跳转展示pdf,代码如下。（pdfView.vue文件）

<template>
	<view>
		<web-view :src="allUrl"></web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				allUrl:'',
				viewerUrl:'/static/pdf/web/viewer.html',//刚解压的文件地址，用来渲染PDF的html
			}
		},
		methods: {
			
		},
		onLoad(option) {
			this.allUrl = this.viewerUrl + '?file=' + option.id//将插件地址与接收的文件地址拼接起来
		}
	}
</script>
 
<style>
 
</style>

父页面（例如有个按钮，点击即可跳转pdf预览页面）

在需要点击预览pdf的vue页面当中使用uni.navigateTo跳转到pdfView.vue页面即可。(记得参数要携带pdf文件的地址！)

• 如若是本地pdf文件，直接传入本地文件地址即可

//点击事件，点击跳转pdfView.vue页面并打开pdf文件
openPdfView(){  
    let url='/static/pdf/web/测试文档.pdf'//本地放的一个pdf文件
    uni.navigateTo({
		url:/pages/pdfView/pdfView?id="+url,
	})
		
},

• 如若pdf需要网上获取，则需要先下载为本地临时文件，再将本地文件地址进行传参。

openDeviceText(){
 
   //uniapp官方的下载api
   uni.downloadFile({
        //需要预览的文件地址
		url: 'http://192.168.1.134:8011/upload/测试文件.pdf', 
		success: (res) => {
			if (res.statusCode === 200) {
                //下载成功，得到文件临时地址
				console.log('下载成功',res.tempFilePath);
				
                //条件编译，若为h5端则直接赋值文件地址			
				// #ifdef H5
				let url = res.tempFilePath
				// #endif
				
                //条件编译，若为App端，则需要将本地文件系统URL转换为平台绝对路径	！！		
				// #ifdef APP-PLUS
				let url = plus.io.convertLocalFileSystemURL(res.tempFilePath)
				// #endif
							
							
				//跳转到pdfView并预览pdf文档。
				uni.navigateTo({
					url:"/pages/pdfView/pdfView?id="+url,
			    })
		   }
		}
    });
},

注意！！不能运行看这

1. 网络地址尽量不要直接使用，可能会产生跨域等问题，最好下载为本地临时文件获得路径后使用。
2. 重要！！手机端无法预览文件请看上图的条件编译（若为APP端），要使用地址转化才可以。（手机端通过下载方式获取pdf地址必须通过地址转换转换为绝对路径！）
3. 本教程只适用于Pdf文件，不可用于浏览图片，word等文件。