步驟:
- 首先可以使用gulp構建一個自己的pdfJs或者使用官方的pdfJs,官方pdfjs下載地址:http://mozilla.github.io/pdf.js/getting_started/#download
選擇這個即可。自己打包的話官方推薦gulp來打包。
- 把下載好的文件放入到vue項目中,目錄最好是public文件夾下。

- 坑點:
assets里的文件編譯過程中會被webpack處理理解為模塊依賴,只支持相對路徑的形式。assets放可能會變動的文件;
static里的文件不會被webpack解析,會直接被復制到最終的打包(默認是dist/static)下,必須使用絕對路徑引用這些文件。static放不會變動的文件。vue-cli3.0有兩個放置靜態資源的目錄分別是public和assets。
public放不會變動的文件(相當於vue-cli2.x中的static)
public/ 目錄下的文件並不會被Webpack處理:它們會直接被復制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件,這個取決於你vue.config.js中publicPath的配置,默認的是/。
- 這樣子就可以預覽pdf了
<iframe class="child" frameborder="0" :src=" '/pdf/web/viewer.html?file=http://xx.xx.xx:8080/' + this.downloadUrl " :style="{ width: width, height: height }" > </iframe>
//因為在vue-cli3以上的版本,public文件目錄默認可以不用寫,於是呢就用 /pdf/web/viewer.html?file=+文件url即可。
