组件转PDF、图片

最新推荐文章于 2024-10-10 18:32:28 发布

Gao04210610

最新推荐文章于 2024-10-10 18:32:28 发布

阅读量32

点赞数

文章标签： pdf javascript

本文链接：https://blog.csdn.net/Gao04210610/article/details/133092178

版权

组件转图片 html-to-image

Html-to-image NPM | npm.io

组件转PDF html2canvas、jspdf

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

function convert_to_pdf(id, name) {
  let component = document.getElementById(id);
  component.style.overflow = "visible";
  html2canvas(component, {
    height: document.getElementById(id).scrollHeight,
    width: document.getElementById(id).scrollWidth,
    background: "#FFF",
    allowTaint: true,
    scale: 1.5,
    useCORS: true
  }).then(canvas => {
    let pdf = new jsPDF("p", "mm", "a4");
    let ctx = canvas.getContext("2d"),
      //A4大小，210mm x 297mm
      a4_width = 210,
      a4_height = 297,
      img_height = Math.floor((a4_height * canvas.width) / a4_width),
      rendered_height = 0;

    while (rendered_height < canvas.height) {
      let page = document.createElement("canvas");
      page.width = canvas.width;
      page.height = Math.min(img_height, canvas.height - renderedHeight);
      page
        .getContext("2d")
        .putImageData(
          ctx.getImageData(
            0,
            rendered_height,
            canvas.width,
            Math.min(img_height, canvas.height - rendered_height)
          ),
          0,
          0
        );
      pdf.addImage(
        page.toDataURL("image/jpeg", 1.0),
        "JPEG",
        0, //边距
        0, //边距
        a4_width,
        Math.min(a4_height, (a4_width * page.height) / page.width)
      );
      rendered_height += img_height;
      if (rendered_height < canvas.height) {
        pdf.addPage();
      }
    }
    pdf.save(name + ".pdf");
  });
  component.style.overflow = "auto";
}

export { convert_to_pdf };