vue或uniapp使用pdf.js预览

一、先下载稳定版的pdf.js,可以去官网下载  官网下载地址  或  pdf.js包下载(已配置好,无需修改)

二、下载好的pdf.js文件放在public下静态文件里, uniapp是放在 static下静态文件里

三、使用方式

   1. vue项目 注意路径 :src="`static/pdfjs-1.9/web/viewer.html?file=你的pdf路径
 2. uniapp项目使用 注意路径  /static/PDFVIEW/pdfjs-1.9/web/viewer.html



四、控制台会出现跨域问题,这时候要注释跨域代码,

    在viewer.js文件找到这段代码,(在1861行)然后注释掉
 var fileOrigin = new URL(file, window.location.href).origin;
 if (fileOrigin !== viewerOrigin) {
   throw new Error('file origin does not match viewer\'s');
 }

五、这时候基本就能看了


pc端效果

vue或uniapp使用pdf.js预览_第1张图片

手机端效果 

 vue或uniapp使用pdf.js预览_第2张图片

vue或uniapp使用pdf.js预览_第3张图片

你可能感兴趣的:(#,Vue3.0+,#,Vue2.6+,#,uni-app,javascript,vue.js,uni-app)