一、先下載穩(wěn)定版的pdf.js，可以去官網(wǎng)下載??官網(wǎng)下載地址? 或??pdf.js包下載(已配置好，無需修改)
二、下載好的pdf.js文件放在public下靜態(tài)文件里，?uniapp是放在?static下靜態(tài)文件里
三、使用方式
? ?1. vue項目?注意路徑?:src="`static/pdfjs-1.9/web/viewer.html?file=你的pdf路徑
<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
<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>
四、控制臺會出現(xiàn)跨域問題，這時候要注釋跨域代碼，
? ? 在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端效果
手機端效果?
?
文章來源：http://www.zghlxwxcb.cn/news/detail-637616.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-637616.html
到了這里，關于vue或uniapp使用pdf.js預覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
