vue.js2:pdf文件转图片，打包压缩下载_vue2 pdf转图片

目录

所需工具

工具下载

代码实现

效果

---

所需工具

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

2、pdfjsWorker（负责核心解析）

3、JSZip（将图片打包成生成.zip文件）

4、FileSaver（保存下载zip文件）

工具下载

npm install --save pdfjs-dist 
npm install jszip --save
npm install file-saver --save

代码实现

<template>
  <div style="width: 100%;margin: auto;display: flex;flex-direction: column;align-items: center;">
    <div style="width:800px;text-shadow: 2px 2px 5px #777;
            line-height: 28px;font-size: 28px;color: rgb(90, 90, 90);
            margin-top: 20px;">
      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 style="width:800px;font-size:12px;margin-top:10px;">单击图片可下载一页</div>
      <div style="width:800px;font-size:12px;margin-top:10px;">
 
        <button type="info" plain style="width:400px;" @click="downJpgAll">全部图片打zip包下载</button>
      </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;"
          @click="downJpg(item)"></canvas>
      </div>
    </div>
  </div>
</template>
 
<script>
 
import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
import JSZip from 'jszip'
import FileSaver from "file-saver"
 
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
 
export default {
  data() {
    return {
      imgFiles: [],
      pdfName: '',
    }
  },
  methods: {
    // 处理pdf
    handlePdf(evt) {
      let that = this;
      // console.log(evt);
      let file = evt.target.files[0];
      console.log(file);
      console.log(file.name);
      this.pdfName = file.name.substring(0, file.name.lastIndexOf("."));
      console.log(this.pdfName);
      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++) {
            //var canvas = document.createElement("canvas");
            //canvas.id = "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 })
              console.log(viewport);
              // 画布大小,默认值是width:300px,height:150px
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
              //const clientWidth = document.body.clientWidth;
              const destWidth = 398;
              canvas.style.width = destWidth + 'px';
              // 根据pdf每页的宽高比例设置canvas的高度
              canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
              page.render({
                canvasContext: ctx,
                viewport,
              })
            })
            //加载完成
 
          }// end for
        })
      }
 
    },
    // 单图下载图片
    downJpg(i) {
      var canvas = document.getElementById("pdf_canvas_" + i);
      var oA = document.createElement("a");
      oA.download = this.pdfName + "_" + i + '.jpg';// 设置下载的文件名，默认是'下载'
      oA.href = canvas.toDataURL("image/jpeg");
      //oA.className = "qrcode"
      document.body.appendChild(oA);
      oA.click();
      oA.remove(); // 下载之后把创建的元素删除
    },
    // 全部下载图片
    downJpgAll() {
      let blogTitle = this.pdfName;
      let that = this;
      let zip = new JSZip();
      let images = zip.folder('images');
      // 要下载图片的url;
      this.imgFiles.forEach((item, index, arr) => {
        console.log('图片', item);
        var canvas = document.getElementById("pdf_canvas_" + item);
        images.file(that.pdfName + "-" + (index + 1) + ".png", that.splitBase64(canvas.toDataURL("image/png", 1.0)), {
          base64: true
        });
      });
      zip.generateAsync({ type: 'blob' }).then(function (content) {
        // see FileSaver.js
        FileSaver.saveAs(content, blogTitle + '.zip');
      });
 
    },
    // 去掉base64编码前的 data:image/png;base64,
    splitBase64(dataurl) {
      var arr = dataurl.split(',')
      return arr[1]
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>

效果展示