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

如果使用cdn的方式，直接引用如下对应文件即可：

如果使用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 style="height: 100%;overflow-y: hidden;">
   <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>

pdf.js实现展示和复制pdf内容介绍到这里，后续会继续更新实现下载、打印等功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。