react html2canvas生成pdf

最新推荐文章于 2024-04-12 16:13:45 发布

tcllxxl

最新推荐文章于 2024-04-12 16:13:45 发布

阅读量1.8k

点赞数

分类专栏： react 文章标签： canvas

本文链接：https://blog.csdn.net/tcllxxl/article/details/105099519

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

  html2canvas(document.getElementById("_container")).then(function (canvas) {
       const contentWidth = canvas.width;
       const contentHeight = canvas.height;
       const pageData = canvas.toDataURL('image/jpeg', 1.0);
       const pdfX = (contentWidth + 10) / 2 * 0.75;
       const pdfY = (contentHeight + 500) / 2 * 0.75 ;// 500为底部留白

       const imgX = pdfX;
       const imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

       const PDF = new jsPDF('', 'pt', [pdfX, pdfY]);

       PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
       PDF.save('download.pdf');
     });