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

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$我這邊出現這樣的情況，於是選擇使用第二種方法⬇

• 使用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

• 問題：$存在跨域問題$，

  • 一般都是藉助後端生成文件流，傳給後端， 或者NGINX設置

• 好處： 解決了移動端網站不能使用pdf viewer的痛點
  
  

---

2023/2/17更新

3. 解決pdf.js 存在的跨域问题

• Local環境
  • 在pages/xx.vue，pdf路径写： ‘/pdf’，
  • 在vue.config.js devserver中，请求路径写： ‘^/pdf’，Target写： 真实pdf请求路径

 devServer: {
  port: 8080,
    open: true, // opens browser window automatically
      proxy: {
    '/pdf': {
      target: 'https://xxx.pdf',
        changeOrigin: true,
          pathRewrite: {
        '^/pdf': ''
      }
    }
  }

• 上线環境
  • 1. 前端请求后端，后端拿到pdf，再返回前端pdf文件，Link: 后端代码
  • 2. Nginx代理
       • 请求路径写： ‘/pdf’，在nginx配置文件中添加：

location ^~/包名/…路径/ pdf {
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://...abc.pdf (真实请求路径)
}

---

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

2022/8/18