2021-12-03 react+html2canvas页面转为图片或者pdf

最新推荐文章于 2024-08-16 07:49:18 发布

Janfiveee_

最新推荐文章于 2024-08-16 07:49:18 发布

阅读量634

点赞数

分类专栏：常见问题

本文链接：https://blog.csdn.net/Janfiveee_/article/details/121704803

版权

html2canvas jsPDF PDF转换前端开发图像处理

关键词由CSDN通过智能技术生成

常见问题专栏收录该内容

12 篇文章 1 订阅

订阅专栏

页面点击按钮点击出发dowanload函数

const download = () => {
    const element: HTMLElement = document.getElementById('demo'); // 需要导出的pdf页面
    html2canvas(element, {
      allowTaint: true,
      useCORS: true,
    }).then((canvas) => {
      const dataImg = new Image();
      dataImg.src = canvas.toDataURL('image/png');
      // FileSaver.saveAs(`${dataImg.src}`, `11.jpg`);
      // message.success('下载中...', 1);
      这两句是转化为图片下载下来
      const pdf = new jsPDF('p', 'pt', 'a4');
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      const pageHeight = (contentWidth / 592.28) * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      const imgWidth = 595.28;
      const imhHeight = (592.28 / contentWidth) * contentHeight;
      if (leftHeight < pageHeight) {
        pdf.addImage(dataImg.src, 'JPEG', 0, position, imgWidth, imhHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(dataImg.src, 'JPEG', 0, position, imgWidth, imhHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save('ss.pdf');
    });
  };