JavaScript实现html转pdf的三种方法详解

方案选型

html2canvas + jspdf
wkhtmltopdf
node + puppeteer

准备工作

利用 chatgpt 生成一个报告的 html 模板，每页包含了一个表格和一个由 echarts 生成的柱状图。实际项目中基本也是这样的内容，文字 + charts，所以用这个来测试具有一定的参考意义，生成的 html 模板如下:

<!DOCTYPE html>
<html lang=\”en\”>
<head>
<meta charset=\”UTF-8\” />
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\” />
<title>Report Page</title>
<!– ECharts库 –>
<script src=\”https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js\”></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.page {
margin-bottom: 40px;
}
.chart {
width: 600px;
height: 400px;
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class=\”page\” id=\”page1\”>
<h2>Page 1 – Data and Chart</h2>
<table>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
<tr>
<td>Item 1</td>
<td>100</td>
</tr>
<tr>
<td>Item 2</td>
<td>200</td>
</tr>
<!– 更多列表数据 –>
</table>
<div id=\”chart1\” class=\”chart\”></div>
</div>

<div class=\”page\” id=\”page2\”>
<table>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
<tr>
<td>Item 1</td>
<td>100</td>
</tr>
<tr>
<td>Item 2</td>
<td>200</td>
</tr>
<!– 更多列表数据 –>
</table>
<h2>Page 2 – Data and Chart</h2>
<!– 类似的列表和图表占位符 –>
<div id=\”chart2\” class=\”chart\”></div>
</div>

<div class=\”page\” id=\”page3\”>
<table>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
<tr>
<td>Item 1</td>
<td>100</td>
</tr>
<tr>
<td>Item 2</td>
<td>200</td>
</tr>
<!– 更多列表数据 –>
</table>
<h2>Page 3 – Data and Chart</h2>
<!– 类似的列表和图表占位符 –>
<div id=\”chart3\” class=\”chart\”></div>
</div>

// 为page2和page3重复上面的过程，设置不同的option配置
var chart2 = echarts.init(document.getElementById(\’chart2\’));
chart2.setOption(option1);
var chart3 = echarts.init(document.getElementById(\’chart3\’));
chart3.setOption(option1);
</script>
</body>
</html>

使用 http-server 在 html 页面目录下启动一个 web 服务器(没有 http-server, 参考这里安装 www.npmjs.com/package/http-server)

http-server . -p 9090

访问 http://127.0.0.1:9090/report.html，即可看到对应的报告模板页面，如下：

wkhtmltopdf

到这里 wkhtmltopdf.org/downloads.html 下载系统对应版本的安装包，然后安装好

执行如下命令，即可生成 pdf

wkhtmltopdf http://127.0.0.1:9090/report.html report.pdf

查看生成的 pdf 内容，能正常显示，看起来也没啥问题

实际报告肯定是有多页的，接下来我们尝试一下看看如何分页。在 page1 和 page2 元素后分别加入一个

元素，对应的 class 如下：

.page-break-after {
page-break-after: always;
}

然后再次执行转换命令，得到的 pdf 如下：

问题

偶尔会卡在某个进度不动，不知道为啥

执行时间不稳定，时快时慢

putteteer

安装就不多说明了，自行 google。安装好后，同样让 chatgpt 生成一段测试的代码，如下：

const puppeteer = require(\’puppeteer\’);

async function savePageAsPDF(url, outputPath) {
// 启动浏览器
const browser = await puppeteer.launch();
// 打开新页面
const page = await browser.newPage();
// 导航到指定URL
await page.goto(url, { waitUntil: \’networkidle2\’ });
// 保存页面为PDF
await page.pdf({ path: outputPath, format: \’A4\’ });
// 关闭浏览器
await browser.close();
console.log(`PDF已保存到：${outputPath}`);
}

// 调用函数保存网页为PDF
savePageAsPDF(\’http://127.0.0.1:9090/report.html\’, \’report1.pdf\’).catch(console.error);

执行转换脚本

node index.js

得到的 pdf 内容如下，看起来也没啥问题

html2canvas + jspdf

引入 html2canvas 和 jspdf 相关脚本

添加下载按钮及转换函数

<button onclick=\”convertToPDF()\”>Convert to PDF</button>

// 使用 html2canvas 渲染指定元素
const canvas = await html2canvas(element, {scale: 2});
const imgData = canvas.toDataURL(\’image/png\’);

// 使用 jsPDF 创建PDF文档
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
// const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
const pdfHeight = (imgProps.height / imgProps.width) * pdfWidth;
// const pdfHeight = pdf.internal.pageSize.getHeight();
console.log(imgProps.width, pdfWidth, pdfHeight, pdf.internal.pageSize.getHeight());
pdf.addImage(imgData, \’JPEG\’, 0, 0, pdfWidth, pdfHeight, \’NONE\’, \’FAST\’);
}

async function convertToPDF() {
const pdf = new window.jspdf.jsPDF();

await addPage(\’page1\’, pdf);
pdf.addPage();
await addPage(\’page2\’, pdf);
pdf.addPage();
await addPage(\’page3\’, pdf);

pdf.save(\’converted.pdf\’);
}
</script>

访问页面，点击按钮即可下载 pdf 了，内容如下：