一、如果是本地文件,則直接運行下面的代碼就可以了
window.open(url,"_blank")
二、使用vue-pdf
vue 使用 vue-pdf 實現(xiàn)pdf在線預覽
報錯:MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)
Package not compatible with Vue cli version 5.x
三、使用pdfjs
pdfjs 官網(wǎng)地址
使用案列
可能報錯:file origin does not match viewer’s。
直接注釋掉web/viewer.js
if (origin !== viewerOrigin && protocol !== 'blob:') {
throw new Error('file origin does not match viewer\'s');
}
四、使用iframe
<iframe :src="pdfSrc" frameborder="0" width="100%" height="100%" ></iframe>
vue預覽本地pdf文件方法之iframe
pdf文件,為什么有些能在瀏覽器直接打開,有些則打開是下載?
這個要看下載源支持在線預覽嗎,支持的話就能直接打開,不支持的話就只能先下載文章來源:http://www.zghlxwxcb.cn/news/detail-666641.html
跳轉(zhuǎn)鏈接的時候遇到問題,由于是單頁面,所有直接訪問html會出現(xiàn)問題
解決辦法:
1、pdfIframe.html 在nginx服務器上部署一個路徑
2、項目中添加路由,指向PdfIframe.vue ,可能需要添加一個
3、vue 多頁面入口配置
vue 多頁面入口配置
4、直接在public 下創(chuàng)建 /pdfView.html 直接訪問/pdfView.html文章來源地址http://www.zghlxwxcb.cn/news/detail-666641.html
到了這里,關(guān)于vue 在線預覽PDF的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!