base64在线展示pdf，pdf放大预览预览效果

base64在线展示pdf，pdf放大预览预览效果

下载插件pdfjs-dist

// 下载插件pdfjs-dist
yarn add pdfjs-dist

页面使用

<div class="commit-img" id="commit_img" @click="previewImage(base64Img)">
  <canvas id="canvas-pdf" style="width: 100%;"></canvas>
</div>

<!-- pdf转为图片后支持放大预览（vant预览图片的组件） -->
<van-image-preview v-model="previewShow" v-if="previewShow">
</van-image-preview>

import PDFJS from 'pdfjs-dist'

methods: {
    
    
    /**
     * @description: 渲染pdf文件
     * @param {pdfUrl} base64文件流
     * @return: 
     * @author: hch
     */
    renderPdfEvn (pdfUrl) {
    
    
      // 当 PDF 地址为跨域时，pdf 应该以流的形式传输，否则会出现pdf损坏无法展示
      PDFJS.getDocument(pdfUrl).then(pdf => {
    
    
        // 得到PDF的总的页数
        let totalPage = pdf.numPages
        // 根据总的页数创建相同数量的canvas
        for (let i = 1; i <= totalPage; i++) {
    
    
          pdf.getPage(i).then((page) => {
    
    
            let viewport = page.getViewport(1)
            let canvas = document.getElementById('canvas-pdf')
            let context = canvas.getContext('2d')
            canvas.height = viewport.height
            canvas.width = viewport.width
            let renderContext = {
    
    
              canvasContext: context,
              viewport
            }
            // 如果你只是展示pdf而不需要复制pdf内容功能，则可以这样写render // page.render(renderContext) 
            page.render(renderContext)
          })
        }
      })
    },
    /**
     * @description: canvas转为base64 图片
     * @param {type} 
     * @return: 
     * @author: hch
     */
    canvasToImageEvn () {
    
    
      // canvas转为base64 图片
      let previewImg = new Image()
      this.previewCanvas = document.querySelector('#canvas-pdf')
      this.previewContext = this.previewCanvas.getContext('2d')
      this.previewContext.drawImage(previewImg, 0, 0)
      previewImg.src = this.previewCanvas.toDataURL('image/png')
      this.previewImgBsae64 = previewImg.src.split(',')[1]
      return previewImg.src
    }
  }