Base64 online display pdf, efecto de vista previa de vista previa de zoom pdf

Base64 online display pdf, efecto de vista previa de vista previa de zoom pdf

Descarga el complemento pdfjs-dist

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

Uso de la página

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