共计 2050 个字符，预计需要花费 6 分钟才能阅读完成。
背景
在计量畛域中，计量检定是一种重要模式，次要用于评定计量用具的计量性能，确定其量值是否精确统一，实现伎俩包含计量测验、出具检定证书和加封盖印等。
在检定证书这一环节，存在一个难点，就是无奈在线预览以及智能生成。
1、证书治理不能满足用户精准打印、特殊字符或多页打印的需要。因为在计量行业中，精密仪器较多，往往会存在一些特殊字符的利用或者会应用某些较为简单的测量单位。
2、零碎不反对批量证书更新以及批量打印等性能，在常见的场景中，出具证书是须要进行批量导出的过程。
3、无奈满足实时打印预览或者 PDF 预览，这样直至打印前都无奈确定打印的格局、范畴等是否合乎需要。
在这篇分享中，咱们将帮忙大家着重解决两个问题：
1、在浏览器中生成 PDF 文件；
2、解决中文以及特殊字符导出 PDF 乱码的问题。
在浏览器中生成 PDF 文件。前端生成 PDF 文件纯依赖于客户端的浏览器资源，对于不同的终端，导出 PDF 的难度会比服务端有所增加。市面上支流的浏览器有三四家，例如 Chrome、Safari、FireFox 等，每个浏览器对于文字内容、CSS 属性解决都不统一，有可能某些配置在某个浏览器上可行，换了一个浏览器之后就有可能天差地别。另外，对于原生的 PDF 文件来说，仅蕴含英文字体，不蕴含任何中文字体，因而当导出的内容中含有中文字体编码时，就会显示乱码，所以通常状况下，咱们都须要为 PDF 进行字体注册操作。
前端常见导出 PDF 办法
目前罕用的前端生成 PDF 文件的办法大抵有以下几种。
1、HTML2Canvas 的办法将 HTML 转换成图片后，在将图转 PDF 文件。这种办法比拟适宜繁多页面。
2、jsPDF 间接 H5 转成 PDF。
除了上述的计划之后，应用 SpreadJS 间接在线设计布局，并且能够间接生成 PDF 文件。带来的益处是什么呢？可视化的操作、代码量少并且能够适配不同的浏览器环境。当然也会有肯定的毛病，对于字体较多的文件，须要注册不同的字体，字体文件越大，占用的带宽就越大。另外，当文件比拟大的时候，有可能会存在性能问题，不过这个也简直是前端导出 PDF 文件的一个瓶颈。那么较为理想的计划便是能够在前端（SpreadJS）设计、展现，最初交由后端来独自导出或者批量导出。
在浏览器中生成 PDF 文件
介绍了那么多，咱们还是回到本篇文章的主题，如何通过前端来生成 PDF 文件。须要用到 SpreadJS 以及导出 PDF 相干的性能，首先须要在页面上引入相干的资源。
而后创立一个用于承载表格实例的 DOM。
初始化表格控件并加载已设计好的表单，或者也能够通过 setValue 的接口实现简略的赋值操作。
想要表单依照指定的要求导出，能够通过代码设置打印相干的配置，也能够用设计器来进行设计。上面是配置打印信息相干的代码。
最初，通过调用 savePDF 办法，将工作簿对象转为 blob，咱们能够通过 window.open 来进行 pdf 的预览或者通过一些保留文件的插件间接将这个 blob 保留为 PDF 文件。
这是 open 之后的成果，咱们能够间接通过浏览器导出 PDF 文件或者是调用浏览器的打印接口实现打印。(demo 在附件名为 PDF 文件夹)
解决中文以及特殊字符导出 PDF 乱码
正如后面所说的，在国内，应用中文的报告是一件再常见不过的事，在计量检测等相干场景，特殊字符的应用也较多。在没注册对应的字体之前，导出的中文字体和非凡字体都显示的是乱码。因而，还须要解决导出中文以及特殊字符 PDF 乱码的问题。
后面提到了注册字体，那咱们的字体应该怎么来？要什么格局的字体呢？首先，先确认咱们的表单须要用到哪些字体，而后去找对应字体的 ttf 文件（电脑上或者是一些字体网站上都有，需注意版权问题）。找到之后将其转为 base64 格局的文件。具体如何转，能够找一些在线的文件转换器，不过在线的有可能会因为字体文件太大而解体，或者有能力的大佬能够本人写一个转换的工具。而后通过上面的形式去把咱们的字体文件存储为一个 js 文件放到咱们的我的项目中。
初始化表单这些就和下面的操作基本一致了，上面就是要害的注册字体步骤了。咱们定义了一个 font 对象，外面只定义了惯例（normal）的字体，外面的 simkai.ttf 就是咱们下面的创立的字体文件。
还有一点须要留神的是，尽管注册了字体，然而要设置对应的中文字体。或者换过来说，你须要在表单上设置什么字体，就去注册对应的字体。
那咱们再来看看特殊字符，注册字体与中文字体的步骤是统一的，非凡在于为了想要在页面上显示特殊字符，咱们须要通过 css 的 font-face 来指定一个 font-family。例如创立了一个叫 sunway-font 的非凡字体，想要在页面上显示。
最初就是通过 savePDF 办法导出 PDF 文件，能够看到 PDF 的中文和特殊字符都能够失常显示。
怎么样？学“废”了吗？无妨试试，“卷”起来。
本文所用代码下载地址：
https://gcdn.grapecity.com.cn…
更多在线 demo 示例代码：https://demo.grapecity.com.cn…