HTML到PDF转换，11K Star 的pdfmake.js轻松应对

在Web开发中，将HTML页面转换为PDF文件是一项常见的需求。无论是生成报告、发票、还是其他任何需要打印或以PDF格式分发的文档，开发者都需要一个既简单又可靠的解决方案。幸运的是，pdfmake.js库以其轻量级、高性能和易用性，成为了许多开发者的首选。本文将介绍如何使用这个拥有11K Star的GitHub项目来实现HTML到PDF的转换。

什么是pdfmake.js

pdfmake.js是一个基于JavaScript的库，用于在客户端和服务器端生成PDF文档。它允许开发者使用HTML和CSS来设计PDF文档的布局和样式，使得创建复杂的PDF文档变得异常简单。

为什么选择pdfmake.js

pdfmake.js的文件大小仅为11KB（压缩后），这使得它成为Web应用中一个非常轻量级的解决方案
拥有超过11K Star的GitHub项目，pdfmake.js得到了广泛的社区支持和认可，稳定性和可靠性值得信任
功能丰富，它支持表格、列表、图片、样式、页眉页脚等多种元素，几乎可以满足所有PDF文档的需求。
pdfmake.js可以轻松集成到任何现有的Web应用中，无论是使用Node.js、Angular、React还是Vue.js。

快速开始

安装

通过npm安装pdfmake.js非常简单：

npm install pdfmake

或者，如果你使用yarn：

yarn add pdfmake

创建PDF文档

创建一个PDF文档只需要几个简单的步骤：

引入pdfmake.js

import  pdfMake from 'pdfmake/build/pdfmake';//引入中文字体，避免转换的PDF中文乱码
pdfMake.fonts = {AlibabaPuHuiTi: {normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'}
};

定义文档内容

const dd = {content: ['Hello, 我是程序员凌览',{ text: 'This is a simple PDF document.', fontSize: 12 },{ text: 'It is generated using pdfmake.js.', bold: true }],//设置默认字体defaultStyle: {font: 'AlibabaPuHuiTi'},
};

创建PDF

const pdf = pdfMake.createPdf(dd);
pdf.getBlob((buffer) => {const file = new File([blob], filename, { type: blob.type })//上传服务器
});//或直接下载
pdf.download('文件名.pdf')

生成的pdf效果：

想动手体验，请访问pdfmake.org/playground.html。

html-to-pdfmake 强强联合

当PDF文档内容非固定，content字段内的结构要随时可变，不能再像下方代码块一样写死，html-to-pdfmake即为解决这类问题而产生的。

const dd = {content: ['Hello, 我是程序员凌览',{ text: 'This is a simple PDF document.', fontSize: 12 },{ text: 'It is generated using pdfmake.js.', bold: true }],//设置默认字体defaultStyle: {font: 'AlibabaPuHuiTi'},
};

安装

通过npm安装：

npm install html-to-pdfmake

或者，如果你使用yarn：

yarn add html-to-pdfmake

HTML字符串转pdfmake格式

引入html-to-pdfmake

import  pdfMake from 'pdfmake/build/pdfmake';
import  htmlToPdfmake from 'html-to-pdfmake';//引入中文字体，避免转换的PDF中文乱码
pdfMake.fonts = {AlibabaPuHuiTi: {normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'}
};//它会返回pdfmake需要的数据结构
const html = htmlToPdfmake(`<div><h1>程序员凌览</h1><p>This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.</p></div>
`);

使用html-to-pdfmake转换的数据结构

const dd = {content:html.content, //设置默认字体defaultStyle: {font: 'AlibabaPuHuiTi'},
};
const pdf = pdfMake.createPdf(dd);
pdf.download()

生成的pdf效果：

添加图片要额外设置:

const ret = htmlToPdfmake(`<img src="https://picsum.photos/seed/picsum/200">`, {imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }const dd = {content:ret.content,images:ret.images
}
pdfMake.createPdf(dd).download();