vue中PDF文件转图片方法

所需工具

1、pdfjs-dist（负责API解析，可将pdf文件渲染成canvas实现预览）

2、pdfjsWorker（负责核心解析）

网址奉上：pdf网址

工具下载

npm install --save pdfjs-dist

代码实现

<template>
  <div style="width: 100%;margin: auto;display: flex;flex-direction: column;align-items: center;">
    <div style="font-size: 30px;">pdf转图片</div>
    <div style="width: 800px;margin-top: 20px;">
      <div>
        选择pdf:
        <input type="file" ref="hiddenfile" accept="application/pdf" @change="handlePdf" class="hiddenInput" />
      </div>
    </div>
    <div v-for="(item, i) in imgFiles" :key="i" style="width:800px;position: relative;margin-top:10px;">
      <canvas :id="`pdf_canvas_${item}`" style="border: 1px solid #eeeeee;float:left;"></canvas>
    </div>
  </div>
</template>
 
<script>

import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker



export default {
  data() {
    return {
      imgFiles: [],
      pdfName: '',
    }
  },
  methods: {
    // 处理pdf
    handlePdf(evt) {
      let that = this;
      let file = evt.target.files[0];
      this.pdfName = file.name.substring(0, file.name.lastIndexOf("."));
      var reader = new FileReader();

      reader.readAsDataURL(file); //将文件读取为 DataURL
      reader.onload = function () { //文件读取成功完成时触发
        const loadingTask = pdfjs.getDocument(reader.result)
        loadingTask.promise.then((pdf) => {
          var pageNum = pdf.numPages;
          console.log("页数:" + pageNum);

          //准备图片
          for (let i = 1; i <= pageNum; i++) {
            let one = i;
            that.imgFiles.push(one);
          }
          //处理
          for (let i = 1; i <= pageNum; i++) {
            pdf.getPage(i).then((page) => {
              const canvas = document.getElementById('pdf_canvas_' + i);
              const ctx = canvas.getContext('2d')
              const viewport = page.getViewport({ scale: 4 })
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              const destWidth = 398;
              canvas.style.width = destWidth + 'px';
              canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
              page.render({
                canvasContext: ctx,
                viewport,
              })
            })
          }
        })
      }
    },
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>

看效果

说一下我一开始安装遇到的巨坑的地方，我用npm安装这个最新的2.16.105这个版本的pdfjs-dist这个包的时候出现了一个bug


看到这里的是不是觉得很奇怪，报了个这个错，这个包里面的pdf.js里面的方法都带有#，这个class类里面的这个方法前加个#没看懂，有懂这个的可以留言告诉我一下，谢谢

最后是到官网去这里安装了2.2.228这个版本后才没问题的
安装指定版本npm install --save pdfjs-dist@2.2.228