vue2 使用pdf.js 实现pdf预览，并可复制文本

        需求：pdf预览，并且可以选中pdf的内容进行复制。        

        在ruoyi的vue前端项目中用到，参考了网上不少文章，因为大部分没给具体的pdf.js版本，导致运行过程中报各种api 错误，经过尝试以下版本可用，故记录一下：

        安装依赖:

 npm  install pdfjs-dist@2.0.943

        vue 页面

      放大    缩小    
页码：{{ `${pageNo}/${totals.length}` }}
                                                                        const PDFJS = require('pdfjs-dist')PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min')import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'import 'pdfjs-dist/web/pdf_viewer.css'import axios from 'axios';export default {  name: 'showPdf',  // props: ['pdfUrl'],  data() {    return {      scale: 1.4,      totals: [],      pageNo: 1,      viewHeight: 0,      pdfUrl: 'http://localhost/a.pdf'    }  },  mounted() {    this.renderPdf(this.scale)  },  watch: {    scale(val) {      this.totals = []      this.renderPdf(val)    }  },  methods: {    async downloadAndConvertToUint8Array(pdfUrl) {      // 使用 axios 发送 GET 请求获取 PDF 文件数据      const response = await axios({        url: pdfUrl,        method: 'GET',        responseType: 'arraybuffer', // 设置响应类型为 arraybuffer      });      // 将 arraybuffer 转换为 Uint8Array      const uint8Array = new Uint8Array(response.data);      return uint8Array;    },    renderPdf(scale) {      this.downloadAndConvertToUint8Array(this.pdfUrl)        .then((uint8Array) => {          console.log(uint8Array);          // 现在你可以用这个 Uint8Array 对象进行进一步处理，例如传递给PDF.js库渲染PDF          // 当 PDF 地址为跨域时，pdf 应该已流的形式传输，否则会出现pdf损坏无法展示          PDFJS.getDocument(uint8Array).then(pdf => {            // 得到PDF的总的页数            let totalPage = pdf.numPages            let idName = 'canvas-pdf-'            // 根据总的页数创建相同数量的canvas            this.createCanvas(totalPage, idName)            for (let i = 1; i  {                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) => {                  // 创建文本图层p                  const textLayerDiv = document.createElement('p')                  textLayerDiv.setAttribute('class', 'textLayer')                  // 将文本图层p添加至每页pdf的p中                  pageDiv.appendChild(textLayerDiv)                  // 创建新的TextLayerBuilder实例                  let textLayer = new TextLayerBuilder({                    textLayerDiv: textLayerDiv,                    pageIndex: page.pageIndex,                    viewport: viewport                  })                  textLayer.setTextContent(textContent)                  textLayer.render()                })              })            }          })        })        .catch((error) => {          console.error('Error downloading or converting the PDF:', error);        });    },    createCanvas(totalPages) {      for (let i = 1; i  1.2) {        this.scale = this.scale - 0.1      }    }  }}  .drag-box {  height: 800px;}.pdf-box {  position: relative;}.el-scrollbar__wrap {  overflow-x: hidden;}

        运行效果：