Vue環境使用pdf.js顯示PDF Viewer

0. 環境

Vue[Quasar]

1. 方法

Quasar自封裝的組件qpdfviewer
- 基於mozila的 pdf.js項目，qpdfviewer組件開箱即用，很方便
- github docs: https://github.com/quasarframework/app-extension-qpdfviewer
- npm docs: https://www.npmjs.com/package/@quasar/quasar-app-extension-qpdfviewer for quasar v1
- Tips: Attention to quasar version!!
- Install: quasar ext @quasar/qpdfviewer || Unistall: quasar ext remove @quasar/qpdfviewer
- 需要在項目 / public 下添加pdf.js文件夾（取自github demo），Install完后，根目錄下quasar.extensions.json記錄了qpdfviewer擴展
- 代碼參考: 非常齊全https://quasarframework.github.io/app-extension-qpdfviewer/docs
```
<q-pdfviewer :src="url" type="pdfjs">
</q-pdfviewer>
```
  缺點： $因爲直接使用quasar的組件不能修改viewer.html文件路徑，前端打包完有可能找不到viewer.html\color{red}{因爲直接使用quasar的組件不能修改viewer.html文件路徑，前端打包完有可能找不到viewer.html}$ 我這邊出現這樣的情況，於是選擇使用第二種方法⬇
使用pdf.js原生項目
- 需要在項目 / public 下添加pdf.js文件夾（同取自quasar github demo）,之前試過在mozila pdf.js下載源碼，會出現類似(unexpected token etc… )bug
- 放在src下的pages頁面：
- ```
<iframe :src="pdfUrl" frameborder="0"></iframe>
```
```
 const fileUrl = '/pdfjs/web/viewer.html'this.pdfUrl = fileUrl + '?file=' + 'your pdf url'
```
- 可以解決打包完找不到viewer.html問題，在fileUrl做修改，根據項目加上你的包路徑，放到服務器就能響應到。

2. pdf.js

問題： $存在跨域問題\color{red}{存在跨域問題}$ ，可以參考網上很多做法，https://www.796t.com/post/OG15bDA=.html （沒能解決，不過有藉鑒之處）
- 一般都是藉助後端生成文件流，傳給後端
好處：解決了移動端網站不能使用pdf viewer的痛點

未完待續，細節決定成敗，希望能夠幫到大家！

2022/8/18

【Vue: 使用pdf.js顯示PDF Viewer】相关推荐

IE不能直接顯示PDF的原因分析和解決方法
>>>>>問題<<<<< 因為有系統用iframe顯示PDF,但PDF有時卻并不能順利地在流覽器中顯示,而是跳出下載對話框,要求下載,給us ...
利用pdf.js在线展示PDF文档
在Web项目中,经常需要在浏览器端展示PDF文档,本文通过一个简单的小例子,简述pdf.js的简单使用,仅供学习分享使用,如有不足之处,还请指正. pdf.js下载 pdf.js是一个通用的.基于we ...
关于使用pdf.js预览pdf的一些问题
手机应用中pdf展示使用非常广泛, 一些pdf由于特殊的内容比如文字.电子签章必须使用复杂的解析器来解析,当使用MultiPdf 这个库加载,会使得包变得非常庞大, 这里我们考虑使用pdf.js 来解 ...
vue-cli使用pdf.js插件浏览pdf文件，禁止下载打印复制粘贴。
很多项目中都会有预览pdf文件,普通的可以直接使用a标签来实现该功能,但是此预览是浏览器自带的,有时候项目需求中会有禁止用户禁止下载和打印功能,浏览器自带的是无法满足的. 小编在网上找到pdf.js插 ...
pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
pdf在html网页中打开是乱码,pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
解决pdf.js预览pdf不显示签名问题(两条路)
解决pdf.js预览pdf不显示签名问题(两条路) 解决这个问题的方法很有意思,解决这一类问题的思路就是:如何不让pdf.js抛出异常或者警告.[其实乍一看好像和问题本身并不沾边,哈哈] 电子签章不显 ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs ...
ElementUI项目使用pdf.js预览pdf文件
最近因为要用Elementui展示pdf文件.查了很多资料,发现vue-pdf还比较初级,不如pdf.js成熟.所以使用的pdf.js. 1.下载pdf.js 点击这里可以[下载]. 2.解压打开e ...

【Vue: 使用pdf.js顯示PDF Viewer】

Vue環境使用pdf.js顯示PDF Viewer

0. 環境

1. 方法

Quasar自封裝的組件qpdfviewer

使用pdf.js原生項目

2. pdf.js

【Vue: 使用pdf.js顯示PDF Viewer】相关推荐

最新文章

热门文章