小魚兒心語：噴泉之所以漂亮是因為它有了壓力；瀑布之所以壯觀是因為它沒有了退路；水之所以能穿石是因為永遠在堅持。人生亦是如此。加油！

一、使用iframe標簽預覽PDF文件

代碼：

<iframe
   :src="fileUrl"
   id="iframeBox"
   ref="iframeRef"
   frameborder="0"
   style="width: 100%; height: 800px"
></iframe>

js:
export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路徑
    };
  }
};

二、使用embed標簽預覽PDF文件

代碼：

<embed
   :src="fileUrl"
   type="application/pdf"
   width="100%"
   height="800px"
/>

js:
export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路徑
    };
  }
};

三、使用vue-pdf插件預覽PDF文件

1、安裝依賴

npm install vue-pdf

2、注冊并引入組件

import pdf from "vue-pdf";
components: {
  pdf,
},

3、使用組件展示PDF文件

<div
        class="pdf-box"
      >
        <div class="pdf-tab">
          <div class="pdf-tab-button">
            <div class="btn-def btn-pre" @click.stop="prePage">上一頁</div>
            <div class="btn-def btn-next" @click.stop="nextPage">下一頁</div>
            <div class="btn-def" @click.stop="clock">順時針</div>
            <div class="btn-def" @click.stop="counterClock">逆時針</div>
          </div>
          <div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div>
          <pdf
            ref="pdf"
            class="pdf-preview"
            :src="fileUrl"
            :page="pageNum"
            :rotate="pageRotate"
            :style="{ height: customHeight + 'px' }"
            @num-pages="pageTotalNum = $event"
            @link-clicked="page = $event"
          ></pdf>
        </div>
        
 //js
  export default {
  data() {
    return {
      fileUrl: "", //文件路徑
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      customHeight: 400, // 自定義的PDF預覽框高度
    };
  },
  components: {
    pdf,
  },
  computed: {
   //解決預覽pdf文字丟失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie的問題
    pdfSrc() {
      //處理pdfUrl返回
      let src = pdf.createLoadingTask({
        url: this.fileUrl,
        //引入pdf.js字體，templ
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/", //3.5方法已把外部cdn改為本地服務器，解決了用戶網(wǎng)絡不好有可能會導致字體包加載失敗
        cMapPacked: true,
      });
      return src;
    },
  },
  methods: {
    //上一頁
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 下一頁
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    //順時針
    clock() {
      this.pageRotate += 90;
    },
    //逆時針
    counterClock() {
      this.pageRotate -= 90;
    }  
  },
};

//css
.pdf-box {
  width: 100%;
  height: 800px;
  .pdf-tab {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pdf-tab-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn-def {
        width: 98px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        border-radius: 5px;
        font-size: 18px;
      }
    }

    .page-size {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
  }
}

今天就分享到這里了，還有其他小功能，大家可以分享交流，共同進步??