Vue專案中使用基於pdf.js的vue-pdf外掛在pc瀏覽器下閱覽PDF檔案

weixin_33766168發表於2019-03-01
VueJS瀏覽器

最近專案中需求為在瀏覽器上閱覽PDF格式的檔案，之前沒有寫過，隨即上網查閱，發現大家常使用的為兩個外掛。
其一是火狐出品的pdf.js,github地址：https://github.com/mozilla/pd...;
其二是PDFObject，額，不太清楚作者，github地址：https://github.com/pipwerks/P...。
前者功能強大，社群活躍，後者是基於jquery封裝出來的外掛，要是在vue中混著jquery總感覺怪怪的，所以我選擇了前者。
又看了一下有沒有輪子可用，誒嘿，vue-pdf,github地址：https://github.com/FranckFrei...。看了文件，可取。
首先下載外掛（建議先新建一個demo出來跑，直接擼到開發專案中...出什麼么蛾子...）

// 我使用的是yarn npm的話 npm install vue-pdf --dev
yarn add vue-pdf --dev

然後在vue檔案中引入使用，建議新建一個vue檔案二次封裝

<template>
  <div class="pdf-container">
    <pdf :src="pdfUrl"/>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'VuePdf',
  components: { pdf },
  data() {
    return {
      // 此處為示例pdf地址
      pdfUrl: 'http://image.cache.timepack.cn/nodejs.pdf'
    }
  }
}
</script>

之後就可以愉快的玩耍了。

不過我遷移到公司專案的時候遇到一個坑，引入這個外掛的時候就會報錯window is not defined，後來查詢資料發現這篇文章，問題才得已解決，感謝作者。https://blog.csdn.net/u010745...

只需要在webpack中設定如下

module.exports = {
  // 請忽視這無關的程式碼
  output: {
    globalObject: "this"
  }
  // 請忽視這無關的程式碼
}

以上。

相關文章