在日常的工作中在線預(yù)覽 PDF 文件的需求是很多的，下面介紹一下使用 vue-pdf 實(shí)現(xiàn)pdf文件在線預(yù)覽

1. 使用 npm 安裝 vue-pdf

   npm install vue-pdf

2. 使用 vue-pdf 顯示 PDF 文件

<template>
  <div>
    <pdf :src="url"></pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'

export default {
  components:{
    pdf
  },
  data(){
    return {
      url: "http://example.com/example.pdf"
    }
  }
</script>

3. 此時(shí)頁面中就會(huì)顯示我們提供的 PDF 文件了，但是此時(shí)只顯示了 PDF 文件的第一頁

4. 按頁顯示 PDF 文件

   <template>
     <div>
       <button @click="prevPage">上一頁</button>
       <button @click="nextPage">下一頁</button>
       <div >{{ pageNumber }} / {{ totalNumber }}</div>
       <pdf
         :page="pageNum"
         :src="url"
         @progress="loadedRatio = $event"
         @num-pages="pageTotalNum=$event" 
         ></pdf>
     </div>
   </template>
   
   <script>
   import pdf from 'vue-pdf'
   
   export default {
     components: {
       pdf,
     },
     data() {
       return {
         url: "http://example.com/example.pdf",
         pageNum: 1,
         totalNumber: 1,
         loadedRatio: 0
       }
     },
     mounted() {
       this.getNumPages()
     },
     methods: {
       getNumPages() {
         let loadingTask = pdf.createLoadingTask(this.url)
         loadingTask.promise.then(pdf => {
           this.totalNumber = pdf.numPages
         }).catch(err => {
           console.error('pdf 加載失敗', err);
         })
       },
       // 上一頁
       prePage() {
         let page = this.pageNumber
         page = page > 1 ? page - 1 : this.totalNumber
         this.pageNumber = page
       },
   
       // 下一頁
       nextPage() {
         let page = this.pageNumber
         page = page < this.totalNumber ? page + 1 : 1
         this.pageNumber = page
       }
     }
   }
   </script>
   
   

使用 vue-pdf 能滿足我們預(yù)覽 PDF 文件的要求，但是使用起來太繁瑣了，配置很多，無法開箱使用，下面介紹一款 PDF SDK 實(shí)現(xiàn) PDF 在線預(yù)覽

使用 ComPDFKit PDF SDK 實(shí)現(xiàn) PDF 文件的在線預(yù)覽

第一步：添加 ComPDFKit PDF SDK 包

1. 將 @compdfkit 文件夾添加到項(xiàng)目的 根 目錄或 assets 目錄下的 lib 目錄中。這將作為 ComPDFKit PDF SDK for Web 的入文件，并將它導(dǎo)入到您的項(xiàng)目中。

2. 將包含運(yùn)行 ComPDFKit PDF SDK for Web 所需的靜態(tài)資源文件的 webviewer 文件夾添加到項(xiàng)目的靜態(tài)資源文件夾中。獲取地址和試用地址：https://www.compdf.com/webviewer/demo

第二步：顯示PDF文檔

1. 將 @compdfkit 文件夾中的 webviewer.js 文件導(dǎo)入到您的項(xiàng)目中。

2. 調(diào)用 ComPDFKitViewer.init() 在您的項(xiàng)目中初始化 ComPDFKit Web Viewer。

3. 將要顯示的 PDF 地址和許可證密鑰傳遞給 init 函數(shù)文章來源地址http://www.zghlxwxcb.cn/news/detail-640466.html

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Viewer loaded');
  })
})

4. 項(xiàng)目運(yùn)行后，您就可以看到要顯示的 PDF 文件了。

到了這里，關(guān)于vue-pdf實(shí)現(xiàn)pdf文件在線預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！