? ? ? ? 需求：pdf預(yù)覽，并且可以選中pdf的內(nèi)容進(jìn)行復(fù)制。? ? ? ??

????????在ruoyi的vue前端項(xiàng)目中用到，參考了網(wǎng)上不少文章，因?yàn)榇蟛糠譀]給具體的pdf.js版本，導(dǎo)致運(yùn)行過程中報(bào)各種api 錯(cuò)誤，經(jīng)過嘗試以下版本可用，故記錄一下：

? ? ? ? 安裝依賴:

 npm  install pdfjs-dist@2.0.943

? ? ? ? vue 頁(yè)面

<template>
  <div>
    <button @click="scalBig">放大</button>
    <button @click="scalSmall">縮小</button>
    <p>頁(yè)碼：{{ `${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>
  </div>
</template>
  
<script>
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 發(fā)送 GET 請(qǐng)求獲取 PDF 文件數(shù)據(jù)
      const response = await axios({
        url: pdfUrl,
        method: 'GET',
        responseType: 'arraybuffer', // 設(shè)置響應(yīng)類型為 arraybuffer
      });

      // 將 arraybuffer 轉(zhuǎn)換為 Uint8Array
      const uint8Array = new Uint8Array(response.data);

      return uint8Array;
    },
    renderPdf(scale) {

      this.downloadAndConvertToUint8Array(this.pdfUrl)
        .then((uint8Array) => {
          console.log(uint8Array);
          // 現(xiàn)在你可以用這個(gè) Uint8Array 對(duì)象進(jìn)行進(jìn)一步處理，例如傳遞給PDF.js庫(kù)渲染PDF
          // 當(dāng) PDF 地址為跨域時(shí)，pdf 應(yīng)該已流的形式傳輸，否則會(huì)出現(xiàn)pdf損壞無法展示
          PDFJS.getDocument(uint8Array).then(pdf => {
            // 得到PDF的總的頁(yè)數(shù)
            let totalPage = pdf.numPages
            let idName = 'canvas-pdf-'
            // 根據(jù)總的頁(yè)數(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添加至每頁(yè)pdf的div中
                  pageDiv.appendChild(textLayerDiv)
                  // 創(chuàng)建新的TextLayerBuilder實(shí)例
                  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 <= totalPages; i++) {
        this.totals.push(i)
      }
    },
    // 分頁(yè)
    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>

? ? ? ? 運(yùn)行效果：

? ?

?????????文章來源地址http://www.zghlxwxcb.cn/news/detail-805912.html

到了這里，關(guān)于vue2 使用pdf.js 實(shí)現(xiàn)pdf預(yù)覽，并可復(fù)制文本的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！