html怎么用pdf保存,html保存为PDF

PDF 保存

原理 html转canvas再转pdf

以下是React中使用，改成VUE使用原理也差不多

该方案胜在省事，但是因为是转图片存，所以分页处可能会有点问题

第三方库

yarn add html2canvas jspdf

代码

直接调用handlePDF方法即可下载。

import html2Canvas from "html2canvas";

import * as jsPDF from "jspdf";

handlePDF = () => {

// 获取需要打印的Dom节点

const pdfDom = document.getElementsByClassName("pdf")[0];

html2Canvas(pdfDom, {

windowWidth: pdfDom.scrollWidth,

windowHeight: pdfDom.scrollHeight + 200,

height: pdfDom.scrollHeight + 200,

// 截屏起止位置 scrollX、scrollY

scrollY: 0,

// 放大两倍，防止模糊

scale: 2

}).then(canvas => {

var contentWidth = canvas.width;

var contentHeight = canvas.height;

var pageHeight = (contentWidth / 592.28) * 841.89;

var leftHeight = contentHeight;

//页面偏移

var position = 0;

//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

var imgWidth = 595.28;

var imgHeight = (595.28 / contentWidth) * contentHeight;

var pageData = canvas.toDataURL("image/jpeg", 1.0);

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

//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

//当内容未超过pdf一页显示的范围，无需分页

if (leftHeight < pageHeight) {

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

} else {

while (leftHeight > 0) {

pdf.addImage(pageData, "JPEG", 20, position + 40, imgWidth, imgHeight);

leftHeight -= pageHeight;

position -= 841.89;

//避免添加空白页

if (leftHeight > 0) {

pdf.addPage();

}

}

}

pdf.save(`方案配置.pdf`);

});

};