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路径
html 复制代码
<iframe :src="`static/pdfjs-1.9/web/viewer.html?file=https://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf`" style="border:none;" width="1000" height="100%"></iframe>
2. uniapp项目使用 注意路径 /static/PDFVIEW/pdfjs-1.9/web/viewer.html
html 复制代码
<template>
    <view style="width: 100vh;">
        <web-view :src="pdfUrl" :fullscreen="true"></web-view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            pdfUrl: '',
            htmlUrl: '/static/PDFVIEW/pdfjs-1.9/web/viewer.html', //新测试预览
     fileUrl:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',  
        }
    },
    onLoad(options) {
        this.pdfUrl = `${this.htmlUrl}?file=${this.fileUrl}`;
    }
}
</script>

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

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

五、这时候基本就能看了


pc端效果

手机端效果

相关推荐
翻滚吧键盘6 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹13 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志15 分钟前
typescript结构化类型应用两例
javascript
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im2 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript