uniapp h5本地预览pdf教程 （含白屏|跨域解决方案）
第一步 下载pdf.js
很多pdf.js版本在真机ios环境都会白屏
经测试后2.5.207版本比较稳定，Android和IOS环境PDF文件都能加载成功
下载地址
https://github.com/mozilla/pdf.js/releases/tag/v2.5.207
https://github.com/mozilla/pdf.js/releases/tag/v2.5.207
第二步 解压移动pdfjs文件至项目中
在根目录static中创建html文件夹 ， 将解压出来的pdfjs文件移动至html文件夹目录下
第三步 创建pdf文件预览页面preview.vue
远程pdf文件地址可能会有跨域问题，这里使用转文件流的方式进行处理，可根据实际业务逻辑改写
<template><web-view :src="pdfUrl" v-if="pdfUrl"></web-view>
</template><script>import request from '@/common/request.js';export default {data() {return {viewerUrl: '/static/html/web/viewer.html', //用来渲染PDF的htmlpdfUrl: '' // 最终显示在web-view中的路径}},onLoad(option) {console.log('=>进入了PDF预览页面')console.log('获取的参数=>', option,decodeURIComponent(option.src))let url = decodeURIComponent(option.src)let data = {url}uni.showLoading({mask:true})//使用pdf网络地址请求文件流信息，解决跨域问题uni.request({url:request.baseUrl+'/h5/loadByUrl', //域名拼接data: data,method: 'post',responseType: 'arraybuffer', //这里记得设置响应数据格式，不然预览的pdf是空白header: {"authorization": uni.getStorageSync('token') // 携带的token},success: (response) => {uni.hideLoading()console.log(response)let pdfData = response.data; //pdfData是后端返回的文件流 //创建blob数据流let blob = new Blob([ pdfData], {type: 'application/pdf;charset=UTF-8'})pdfData = window.URL.createObjectURL(blob)this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(pdfData)}`;},})//若没有pdf网络地址跨域问题可直接加载pdf// this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(url)}`;},}
</script>第四步 实际场景中获取pdf地址并跳转至预览页
uni.navigateTo({url:`/pages/index/preview?src=${encodeURIComponent(pdf网络地址)}`
})预览效果