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端效果

手机端效果

相关推荐
耶啵奶膘23 分钟前
uniapp-是否删除
linux·前端·uni-app
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel