如何在vue中使用pdfjs显示PDF可复制

今天小编给大家分享一下如何在vue中使用pdfjs显示PDF可复制的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

pdf显示的方法

方法一

使用embed标记来使用浏览器自带的pdf工具。

这种实现方式优缺点都很明显：

优点：自带“打印”，“搜索”，“翻页”等功能，强大且实现方便。

缺点：不同浏览器的pdf工具样式不一，且无法满足个性化需求，比如：禁止打印，下载等。

方法二

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

• 基础功能集成
  

• 使用Text-Layers渲染(可实现pdf内容复制)

什么是PDF.JS

PDF.js是基于HTML5技术构建的，用于展示可移植文档格式的文件(PDF)，它可以在现代浏览器中使用且无需安装任何第三方插件。

安装：

npm install pdfjs-dist

基础功能有两个必须引用的文件：

• pdf.js

• pdf.worker.js

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

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

这两个文件包含了获取、解析和展示PDF文档的方法，但是解析和渲染PDF需要较长的时间，可能会阻塞其它JS代码的运行。

为解决该问题，pdf.js依赖了HTML5引入的Web Workers——通过从主线程中移除大量CPU操作（如解析和渲染）来提升性能。

PDF.js的API都会返回一个Promise，使得我们可以优雅的处理异步操作。

使用

本文章只介绍在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')    // 当 PDF 地址为跨域时，pdf 应该已流的形式传输，否则会出现pdf损坏无法展示    PDFJS.getDocument(this.pdfUrl).then(pdf => {     // 得到PDF的总的页数     let totalPage = pdf.numPages     let idName = 'canvas-pdf-'     // 根据总的页数创建相同数量的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而不需要复制pdf内容功能，则可以这样写render       // page.render(renderContext) 如果你需要复制则像下面那样写利用text-layer       page.render(renderContext).then(() => {        return page.getTextContent()       }).then((textContent) => {        // 创建文本图层div        const textLayerDiv = document.createElement('div')        textLayerDiv.setAttribute('class', 'textLayer')        // 将文本图层div添加至每页pdf的div中        pageDiv.appendChild(textLayerDiv)        // 创建新的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>

以上就是“如何在vue中使用pdfjs显示PDF可复制”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。