vue2.0項目中使用pdfJs


步驟:

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

      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的配置,默認的是/。

  3. 這樣子就可以預覽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即可。

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM