HTML 到 PDF 节点 JS 背景颜色 - Javascript

在类似于报告、文档、电子书等场景中，通常需要将 HTML 页面转换为 PDF 文件。而在 HTML 节点中使用不同的背景颜色是一种常见的设计需求。本文将介绍如何使用 Javascript 将 HTML 转换为 PDF，并保留节点的背景颜色。

一、使用 jsPDF 库和 canvg 库

jsPDF 是一个用于生成 PDF 文件的 Javascript 库，其支持多种格式的页面元素。而 canvg 则是一个用于将 SVG 转换为 Canvas 的 Javascript 库。

综合使用这两个库，可以实现将 HTML 转换为 PDF，并且保留节点的背景颜色。下面是示例代码：

// 引入 jsPDF 和 canvg 库
import jsPDF from 'jspdf';
import canvg from 'canvg';

// HTML 节点字符串
const htmlStr = `
<div>
  <h1 style="background-color: #f00;">Hello, World!</h1>
  <p style="background-color: #0f0;">This is a demo page.</p>
</div>
`;

// 创建一个 Canvas 元素
const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 800;

// 将 HTML 转换为 Canvas
canvg(canvas, htmlStr);

// 创建一个 jsPDF 实例
const doc = new jsPDF('p', 'pt', 'a4');

// 将 Canvas 中的内容添加到 PDF 中
const imgData = canvas.toDataURL('image/png');
doc.addImage(imgData, 'PNG', 0, 0, 600, 800);

// 保存 PDF 文件
doc.save('demo.pdf');

二、注意事项

• jsPDF 支持多种元素类型，包括图片、文本、线条等。在将 HTML 转换为 PDF 时，只需要将网页内容渲染到 Canvas 中，然后将 Canvas 转换为图像，最后添加到 jsPDF 中即可。
• canvg 可以将 SVG 转换为 Canvas，如果需要将具有背景颜色的 SVG 转换为 Canvas，可以采用以下方式：

canvg(canvas, svgStr, {
  ignoreMouse: true,
  ignoreAnimation: true,
  ignoreDimensions: true,
  scaleWidth: canvas.width,
  scaleHeight: canvas.height,
  renderCallback: function () {
    // 渲染完成后执行的回调函数
  }
});

• 在将 HTML 转换为 PDF 时，需要根据实际需求设置页面大小和方向，设置方法如下：

const doc = new jsPDF('p', 'pt', 'a4');

这里的参数含义分别为：页面方向（p-横向，l-纵向），页面单位（pt-磅，mm-毫米，cm-厘米，in-英寸），页面大小（a4、a3、letter 等常见规格）。

• 如果需要在 HTML 中使用图片，需要将图片转换为 base64 编码，否则图片无法被正确地显示。图片转换可用工具，如 base64.guru。
• 如果希望在 PDF 中添加分页符，可以使用下列代码：

doc.addPage();

三、总结

使用 jsPDF 和 canvg 库可以很方便地将 HTML 转换为 PDF，并且保留节点的背景颜色。代码量相对较少，适合在前端项目中快速应用。同时可以根据实际需求对页面大小和方向进行设置，还可以添加图片、分页符等元素，实现多样化的文档生成需求。