大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

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,使得我们可以优雅的处理异步操作。

使用1

下面是自己写的展示pdf的组件可以直接拿去用

注:具体解释请看下面代码中的注释

<template>
  <div id="showPdf">
    <el-scrollbar ref="elscrollbar" style="height: 800px;overflow-y: hidden;">
      <div class="position page">
        <span class="span_1" @click="pageUp">上一页</span>
        <span>页码:{{`${pageNo}/${totals.length}`}}</span>
        <span class="span_2" @click="pageDown">下一页</span>
      </div>
      <div class="position info">
        <span class="span_1">上传者:{{pdfInfo.updateBy}}</span>
        <span>上传时间:{{pdfInfo.updateOn}}</span>
        <span class="span_2">附件编号:{{pdfInfo.workNo}}</span>
      </div>
      <div class="main_content" id="mainContent" ref="mainContent">
        <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 axios from 'axios'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
export default {
  name: 'showPdf',
  props: ['pdfUrl', 'pdfInfo'],
  data () {
    return {
      scale: 1.2,
      totals: [],
      pageNo: 1,
      viewHeight: 0,
      scrollbar: ''
    }
  },
  mounted () {
    this.scrollbar = this.$refs['elscrollbar'].$refs['wrap']
    this.scrollbar.addEventListener('scroll', this.scrollfun, false)
    this.getMainContentWidth()
    this.getPdfFun()
  },
  methods: {
    // 当PDF地址跨域时,后台以流的形式传输PDF
    getPdfFun () {
      axios({
        method: 'get',
        url: this.pdfUrl,
        data: {},
        responseType: 'blob'
      }).then(res => {
        let url = window.URL.createObjectURL(new Blob([res.data]))
        this.renderPdf(url)
      })
    },
    getMainContentWidth () {
      let div = this.$refs.mainContent
      let width = window.getComputedStyle(div).width
      this.contentWidth = parseInt(width)
    },
    renderPdf (pdfUrl) {
      PDFJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min')
      PDFJS.getDocument(pdfUrl).then(pdf => {
        let totalPage = pdf.numPages
        let idName = 'canvas-pdf-'
        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 viewportFirst = page.getViewport(1)
           // 计算 scale值,this.contentWidth 为 ref = mainContent 的元素的宽度
            let scale = this.contentWidth / viewportFirst.width
            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
            }
            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 + 15) / this.viewHeight)
      }
    },
    /**
     * 上一页
     */
    pageUp () {
      let totalPages = this.totals.length
      if (this.pageNo > 0) {
        this.scrollbar.scrollTop = (this.pageNo - 2) * (this.scrollbar.scrollHeight / totalPages)
      }
    },
    /**
     * 下一页
     */
    pageDown () {
      let totalPages = this.totals.length
      if (this.pageNo < totalPages) {
        this.scrollbar.scrollTop = this.pageNo * (this.scrollbar.scrollHeight / totalPages)
      }
    }
  }
}
</script>

<style lang="scss">
  #showPdf {
    .position {
      position: absolute;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.2);
      z-index: 100;
      padding: 0 15px;
      line-height: 25px;
      color: #fff;
      .span_1 {
        float: left;
      }
      .span_2 {
        float: right;
      }
    }
    .page {
      bottom: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      .span_1 {
        cursor: pointer;
      }
      .span_2 {
        cursor: pointer;
      }
    }
    .info {
      top: 0;
    }
    .pdf-box {
      position: relative;
      text-align: left;
      display: inline-block;
    }
  }
</style>

使用2

github: vue-pdf-syl

npm install vue-pdf-syl --save
npm install pdfjs-dist --save

使用

<template>
  <div id="average">
    <vuePdf viewHeight="500px" pdfUrl="static/dddd.pdf"></vuePdf>
  </div>
</template>
<script>
import vuePdf from 'vue-pdf-syl'
export default {
  name: 'average',
  components: {
    vuePdf
  },
  data () {
    return {
    }
  },
  mounted () {
  }
}
</script>

pdf.js实现展示和复制PDF内容介绍到这里,后续会继续更新实现下载、打印等功能,有不懂的欢迎随时骚扰!