将前端页面生成为pdf文件下载的处理方案及遇到的问题(html2canvas+jspdf)（html2canvas绘制textarea生成图片文字不换行的处理）

1、下载并引入html2canvas，jspdf

npm install html2canvas jspdf
此处我使用的版本为："html2canvas": "^1.4.1","jspdf": "^2.5.1",

2、在页面中引入库

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';

3、在点击生成pdf的按钮事件方法中写具体处理过程

1）handleExportPDF() {

//由于html2canvas不支持textarea换行，此处执行this.changeStatus = true后将会替换原textarea元素为自写的div并复制textarea，下载完后会还原

//此处参考方案：用html2canvas截图保存图片趟坑记录_html2canvas 截图内容不对-CSDN博客

Promise.all([(this.changeStatus = true)]).then((res) => {

// 获取表单元素

const formElement = document.getElementById("myElement");

// 使用 html2canvas 库将 HTML 页面转换为 canvas 元素

//此处参考方案JavaScript 实现html导出为PDF文件_js html转pdf-CSDN博客

html2canvas(formElement, {

  allowTaint: false,

  scale: 2,

}).then((canvas) => {

let pageHeight = (canvas.width / 592.28) * 841.89;

let leftHeight = canvas.height;

let position = 0;

let imgWidth = 595.28;

let imgHeight = (595.28 / canvas.width) * canvas.height;

// 将 canvas 元素转换为图像数据

let pageData = canvas.toDataURL("img/jpeg", 1.0);

//生成pdf实例

let pdf = new jsPDF("", "pt", "a4");

// 判断打印dom高度是否需要分页，如果需要进行分页处理

if (leftHeight < pageHeight) {

pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);

} else {

while (leftHeight > 0) {

// 将图像数据添加到 PDF 文档中

pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);

leftHeight -= pageHeight;

position -= 841.89;

if (leftHeight > 0) {

pdf.addPage();

}

}

}

pdf.save("test.pdf");

this.changeStatus = false;

});

});

},

2）textarea样式的写法

.textBlock {

max-width: 100%;

height: auto;

min-height: 157px;

line-height: 1.5;

vertical-align: bottom;

transition: all 0.3s, height 0s;

box-sizing: border-box;

margin: 0;

padding: 0;

font-variant: tabular-nums;

list-style: none;

font-feature-settings: "tnum";

position: relative;

display: inline-block;

width: 100%;

padding: 4px 11px;

color: rgba(0, 0, 0, 0.65);

font-size: 14px;

line-height: 1.5;

background-color: #fff;

background-image: none;

border: 1px solid #d9d9d9;

border-radius: 4px;

transition: all 0.3s;

}

4、实现效果截图

网页界面：

生成的pdf文件截图：

2023.11.03更新，遇到一个多页时内容被截断的问题
解决方案参考：html转pdf分页问题-CSDN博客，也可以使用这个方案封装的库k-htmlpdf: 解决html-to-pdf的分页问题和自定义分页功能代替html2canvas+jspdf