npm install pdfjs-dist

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

<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>