lc-pdf-to-png/src/index.js

Convert PDF to PNG image object on the web page

import * as PDFJS from "pdfjs-dist/es5/build/pdf.js";
PDFJS.GlobalWorkerOptions.workerSrc = import(
  "pdfjs-dist/build/pdf.worker.entry"
  );

let pdfFile = null;
const pngList = [];
let pageNum = 0;
let pdf = null;
let pages = 0;
let callback = null;

const start = (file, fn) => {
  callback = fn
  pdfFile = file
  if ( pdfFile) {
    const reader = new FileReader();
    reader.onload = e => {
      const data = new Uint8Array(e.target.result);
      getPng(data);
    };

    reader.readAsArrayBuffer(pdfFile);
  }
};


const getPng = (data) =>{
  PDFJS.getDocument(data).promise.then(v => {
    pages = v.numPages;
    pdf = v;
    getPngList();
  });
}


const getPngList = () => {
  if (pages < pageNum) {
    callback()
    return;
  }
  pdf.getPage(pageNum++).then(page => {
    const cvs = document.createElement("canvas");
    const context = cvs.getContext("2d");

    // 设置缩放比例
    const scale = devicePixelRatio;
    const viewport = page.getViewport({ scale });

    cvs.width = viewport.width * scale;
    cvs.height = viewport.height * scale;
    context.scale(scale, scale);

    page
      .render({
        canvasContext: context,
        viewport: viewport
      })
      .promise.then(() => {
      cvs.toBlob(blob => {
        const imageFile = new File(
          [blob],
          `page_${_this.pageNum}.png`,
          {
            type: "image/png"
          },
          "image/png",
          1.0
        );
        pngList.push({
          url: cvs.toDataURL(),
          name: `page_${pageNum}.png`,
          file: imageFile
        });

        getPngList();
        // 可以用于下载或上传
      }, "image/png");
    });
  });
}

const getPage = (pageNum) => {
  if(!pdf) return
  return pdf.getPage(pageNum)
}

module.exports = {
  start,
  getPage
};