html2Canvas jsPDF 实现导出PDF文件

jsPDF官网
html2Canvas官网

<div id="canvas_pdf">我是一段话
</div>

import html2canvas from 'html2canvas';
import {
     jsPDF } from 'jspdf';

	const _this = this;const canvas_pdf = document.getElementById('canvas_pdf');canvas_pdf.style.background = '#FFFFFF';const contentWidth = canvas_pdf.scrollWidth;const contentHeight = canvas_pdf.scrollHeight;//一页pdf显示html页面生成的canvas高度;const pageHeight = (contentWidth / 592.28) * 841.89;//未生成pdf的html页面高度let leftHeight = contentHeight;//页面偏移let position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高const imgWidth = 595.28;const imgHeight = (592.28 / contentWidth) * contentHeight;console.log(contentHeight)html2canvas(canvas_pdf, {
    width: contentWidth,height: contentHeight,scrollY: -canvas_pdf.scrollTop,useCORS: _this.images.length ? true : true, // Whether to attempt to load images from a server using CORS}).then(function (canvas) {
    document.body.appendChild(canvas);const pageData = canvas.toDataURL('image/jpeg', 1); // 将canvas转换成img的src流// console.log("base64编码数据：", imgUrl);// _this.url = pageDatavar pdf = new jsPDF('', 'pt', 'a4');//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);} else {
    while (leftHeight > 0) {
    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;//避免添加空白页if (leftHeight > 0) {
    pdf.addPage();}}}pdf.save('content.pdf');});