怎么在vue中使用pdfjs顯示PDF可復(fù)制-創(chuàng)新互聯(lián)

本篇文章為大家展示了怎么在vue中使用pdfjs顯示PDF可復(fù)制，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計服務(wù)，主要包括成都網(wǎng)站設(shè)計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、成都app開發(fā)、微信小程序定制開發(fā)、宣傳片制作、LOGO設(shè)計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗豐富的經(jīng)驗，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。

pdf顯示的方法

方法一

使用embed標(biāo)記來使用瀏覽器自帶的pdf工具。

這種實現(xiàn)方式優(yōu)缺點都很明顯：

優(yōu)點：自帶“打印”，“搜索”，“翻頁”等功能，強(qiáng)大且實現(xiàn)方便。

缺點：不同瀏覽器的pdf工具樣式不一，且無法滿足個性化需求，比如：禁止打印，下載等。

方法二

使用Mozilla的PDF.js，自定義展示PDF。

基礎(chǔ)功能集成
使用Text-Layers渲染(可實現(xiàn)pdf內(nèi)容復(fù)制)

什么是PDF.JS

PDF.js是基于HTML5技術(shù)構(gòu)建的，用于展示可移植文檔格式的文件(PDF)，它可以在現(xiàn)代瀏覽器中使用且無需安裝任何第三方插件。

安裝：

npm install pdfjs-dist

基礎(chǔ)功能有兩個必須引用的文件：

pdf.js
pdf.worker.js

如果使用CDN的方式，直接引用如下對應(yīng)文件即可：

https://mozilla.github.io/pdf.js/build/pdf.js
https://mozilla.github.io/pdf.js/build/pdf.worker.js

如果使用npm的方式，則在需要使用PDF.js的文件中如下引用:

import PDFJS from 'pdfjs-dist';

PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';

這兩個文件包含了獲取、解析和展示PDF文檔的方法，但是解析和渲染PDF需要較長的時間，可能會阻塞其它JS代碼的運(yùn)行。

為解決該問題，pdf.js依賴了HTML5引入的Web Workers——通過從主線程中移除大量CPU操作（如解析和渲染）來提升性能。

PDF.js的API都會返回一個Promise，使得我們可以優(yōu)雅的處理異步操作。

使用

本文章只介紹在vue中的使用, 下面是自己寫的展示pdf的組件可以直接拿去用

注：具體解釋請看下面代碼中的注釋

<template>
  <!--<button @click="scalBig">放大</button>-->
  <!--<button @click="scalSmall">縮小</button>-->
  <!--<p>頁碼：{{`${pageNo}/${totals.length}`}}</p>-->
  <div class="drag-box" id="dragBox" @scroll="scrollfun($event)">
   <el-scrollbar >
   <div class="wrapper" id="pdf-container">
    <div v-for="item in totals" :id="`page-${item}`" :key="item" class="pdf-box">
     <canvas :id="'canvas-pdf-' + item" class="canvas-pdf"></canvas>
    </div>
   </div>
   </el-scrollbar>
  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
export default {
 name: 'showPdf',
 props: ['pdfUrl'],
 data () {
  return {
   scale: 1.4,
   totals: [],
   pageNo: 1,
   viewHeight: 0
  }
 },
 mounted () {
  this.renderPdf(this.scale)
 },
 watch: {
  scale (val) {
   this.totals = []
   this.renderPdf(val)
  }
 },
 methods: {
  renderPdf (scale) {
   PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min')
   // 當(dāng) PDF 地址為跨域時，pdf 應(yīng)該已流的形式傳輸，否則會出現(xiàn)pdf損壞無法展示
   PDFJS.getDocument(this.pdfUrl).then(pdf => {
    // 得到PDF的總的頁數(shù)
    let totalPage = pdf.numPages
    let idName = 'canvas-pdf-'
    // 根據(jù)總的頁數(shù)創(chuàng)建相同數(shù)量的canvas
    this.createCanvas(totalPage, idName)
    for (let i = 1; i <= totalPage; i++) {
     pdf.getPage(i).then((page) => {
      let pageDiv = document.getElementById(`page-${i}`)
      let viewport = page.getViewport(scale)
      let canvas = document.getElementById(idName + i)
      let context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      this.viewHeight = viewport.height
      let renderContext = {
       canvasContext: context,
       viewport
      }
      // 如果你只是展示pdf而不需要復(fù)制pdf內(nèi)容功能，則可以這樣寫render
      // page.render(renderContext) 如果你需要復(fù)制則像下面那樣寫利用text-layer
      page.render(renderContext).then(() => {
       return page.getTextContent()
      }).then((textContent) => {
       // 創(chuàng)建文本圖層div
       const textLayerDiv = document.createElement('div')
       textLayerDiv.setAttribute('class', 'textLayer')
       // 將文本圖層div添加至每頁pdf的div中
       pageDiv.appendChild(textLayerDiv)
       // 創(chuàng)建新的TextLayerBuilder實例
       let textLayer = new TextLayerBuilder({
        textLayerDiv: textLayerDiv,
        pageIndex: page.pageIndex,
        viewport: viewport
       })
       textLayer.setTextContent(textContent)
       textLayer.render()
      })
     })
    }
   })
  },
  createCanvas (totalPages) {
   for (let i = 1; i <= totalPages; i++) {
    this.totals.push(i)
   }
  },
  // 分頁
  scrollfun (e) {
   let scrollTop = e.target.scrollTop
   if (scrollTop === 0) {
    this.pageNo = 1
   } else {
    this.pageNo = Math.ceil(scrollTop / this.viewHeight)
   }
  },
  // 放大
  scalBig () {
   this.scale = this.scale + 0.1
  },
  // 縮小
  scalSmall () {
   if (this.scale > 1.2) {
    this.scale = this.scale - 0.1
   }
  }
 }
}
</script>

<style scoped lang="scss">
 .drag-box {
  height: 800px;
 }
 .pdf-box {
  position: relative;
 }
 .el-scrollbar__wrap {
  overflow-x: hidden;
 }
</style>

上述內(nèi)容就是怎么在vue中使用pdfjs顯示PDF可復(fù)制，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：怎么在vue中使用pdfjs顯示PDF可復(fù)制-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://bm7419.com/article16/igogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、定制開發(fā)、網(wǎng)站內(nèi)鏈、App設(shè)計、網(wǎng)站排名、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容