# PDFTable

**Repository Path**: diydog/pdftable

## Basic Information

- **Project Name**: PDFTable
- **Description**: 对如何在浏览器端导出带有表格的PDF文件提供了文档与示例代码。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-30
- **Last Updated**: 2022-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 浏览器端导出带表格的 pdf 文件

## 依赖库

### 1. jsPDF

有关 jsPDF 的更多信息和示例，您可以参考以下链接：

- <https://github.com/MrRio/jsPDF>

- <https://www.npmjs.com/package/jspdf>

- <https://micropyramid.com/blog/export-html-web-page-to-pdf-using-jspdf/>

### 2. jsPDF - AutoTable

有关 jsPDF - AutoTable 的更多信息，请参考以下链接：

- <https://github.com/simonbengtsson/jsPDF-AutoTable>

- <https://www.npmjs.com/package/jspdf-autotable>

## AutoTable 导出中文乱码解决

根据官方文档介绍 AutoTable 导出不支持中文编码，需要自己准备字体 js 文件。jsPDF 仓库中准备了 ttf 字体文件转字体 js 文件的方法，在 fontconverter 目录中。也可使用本项目下的 fontconverter 进行转化，（本项目下的 fontconverter 是对 jsPDF 中 fontconverter 的拷贝，方便使用）。

1. 准备一个 ttf 字体文件，可以在网上下载。

   字体文件下载地址：<http://www.font5.com.cn/font_search.php>

2. 找到 fontconverter 目录中的 fontconverter.html 文件，在浏览器中打开这个文件，选择 ttf 字体文件，上面的 fontName 会自动填充，也可自己命名，选择 ttf 文件后点击 create 将生成一个 js 文件。

3. 将生成的这个 js 文件放入自己的项目中，具体路径根据自己需要放置，引入这个 js 文件。

4. 示例

   ```javascript
   var doc = new jsPDF("", "pt", "a4");
   doc.setFont("msyh");
   doc.autoTable({
     body: [{ header1: "测试一", header2: "22666888777888666", header3: "23.3" }],
     columns: [
       { header: "姓名", dataKey: "header1" },
       { header: "编号", dataKey: "header2" },
       { header: "面积", dataKey: "header3" },
     ],
     styles: { fillColor: [255, 255, 255], font: "msyh", textColor: [0, 0, 0] },
   });
   ```

   也可以将生成的 js 文件的 font 字段内容提取出来直接使用：

   ```javascript
   const font = "AAEAAAAWAQAABA......";
   const doc = new jsPDF();
   doc.addFileToVFS("MyFont.ttf", font);
   doc.addFont("MyFont.ttf", "MyFont", "normal");
   doc.setFont("MyFont");
   ```

5. 完成并下载

   ```javascript
   doc.save();
   ```

## 最后

可以对生成的字体 js 文件进行压缩，不然文件会比较大。

## License

MIT