背景在计量领域，计量检定是一种重要的形式，主要用于评价计量器具的计量性能，判断其是否符合要求。数值准确一致，实现手段包括计量检验、出具检定证书和封印盖章等。在检定证书环节，有一个难点，就是不能在线预览和智能生成。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方法，将workbook对象转化为blob，我们可以通过window.open预览pdf或者通过一些文件保存插件直接将blob保存为PDF文件。这是打开后的效果。我们可以直接通过浏览器导出PDF文件，也??可以调用浏览器的打印接口进行打印。（该demo在附件的PDF文件夹中有命名）解决中文和特殊字符导出PDF乱码上面说了，在中国，使用中文报表是很普遍的。用的也比较多。未注册相应字体前，导出的中文字体和特殊字体显示乱码。所以也需要处理导出中文和特殊字符PDF乱码的问题。前面说了注册字体，那么我们的字体应该怎么来呢？你想要什么类型的字体？首先先确认一下我们的表单需要用到哪些字体，然后找到对应字体的ttf文件（在电脑上或者一些字体网站上都有，注意版权问题）。找到后，将其转换为base64格式的文件。具体怎么转换，可以找一些网上的文件转换器，但是网上的可能会因为字体文件太大而崩溃，或者有能力的大佬自己写一个转换工具。然后通过以下方式将我们的字体文件作为js文件存储在我们的项目中。初始化表格和上面的操作基本一样，下面就是注册字体的关键步骤了。我们定义一个字体对象，它只定义普通（normal）字体，里面的simkai.ttf就是我们上面创建的字体文件。另外需要注意的是，虽然注册了字体，但是必须设置对应的中文字体。或者换句话说，如果你需要在窗体上设置任何字体，只要注册相应的字体即可。那我们再来看看特殊字符。注册字体和中文字体的步骤是一样的。比较特殊的是，为了在页面上显示特殊字符，我们需要通过css的font-face指定一个font-family。例如，创建了一个名为sunway-font的特殊字体，并希望在页面上显示。最后通过savePDF方法导出PDF文件，可以看到PDF的中文和特殊字符可以正常显示。这个怎么样？你学会“浪费”了吗？不妨试试，“卷”起来。本文所用代码下载地址：https://gcdn.grapecity.com.cn...更多在线demo示例代码：https://demo.grapecity.com.cn...
