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非常简单：

bash
npm install pdfmake

或者，如果你使用yarn：

bash
yarn add pdfmake

创建PDF文档

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

引入pdfmake.js

jsx
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'
    }
};

定义文档内容

jsx
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

jsx
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即为解决这类问题而产生的。

jsx
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安装：

bash
npm install html-to-pdfmake

或者，如果你使用yarn：

bash
yarn add html-to-pdfmake

HTML字符串转pdfmake格式

引入html-to-pdfmake

jsx
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转换的数据结构

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