vue pdfjs 線上預覽

1. 下載下傳pdfjs

   官網：​​​http://mozilla.github.io/pdf.js/getting_started/#download​​



2. 放入項目中

   将下載下傳下來的檔案解壓縮後，重命名為pdf，将裡面的pdf檔案夾拷貝到項目中的public檔案夾中



3. 頁面中使用

<template>
  <div class="container">
    <iframe :src="pSrc" class="child-container"></iframe>
  </div>
</template>

<script>
export default {
  name: "pdf",
  data() {
    return {
      // pdf檔案預覽完整路徑
      pSrc: '',
    };
  },

  methods: {
    //線上預覽pdf檔案方法
    onlinePreviewPDF() {

      //1. 組裝線上預覽完整路徑，一般由後端擷取
      //baseurl ：pdf存放的檔案路徑，可以是本地的，也可以是遠端，這個是遠端的，親測可以用
      let baseurl = 'http://localhost:8080/22.pdf';

      //2. 解決ie有緩存  及決方案：加個随機數解決 + '?r=' + new Date()
      let pSrc = baseurl + '?r=' + new Date();
      //3.檔案路徑編碼+調用pdfjs實作線上預覽pdf檔案
      this.pSrc = '/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc);
    },
  },
  //生命周期函數
  mounted: function () {
    this.onlinePreviewPDF();
  }
};
</script>

<style>

.child-container {
  width: 100%;
  height: 500px;
}
</style>      

預覽效果

本地靜态檔案