背景

在計(jì)量領(lǐng)域中,，計(jì)量檢定是一種重要形式，主要用于評(píng)定計(jì)量器具的計(jì)量性能,，確定其量值是否準(zhǔn)確一致，實(shí)現(xiàn)手段包括計(jì)量檢驗(yàn),、出具檢定證書和加封蓋印等,。
在檢定證書這一環(huán)節(jié)，存在一個(gè)難點(diǎn),，就是無法在線預(yù)覽以及智能生成。

1,、證書管理不能滿足用戶精準(zhǔn)打印,、特殊字符或多頁(yè)打印的需求,。因?yàn)樵谟?jì)量行業(yè)中，精密儀器較多,，往往會(huì)存在一些特殊字符的應(yīng)用或者會(huì)使用某些較為復(fù)雜的測(cè)量單位,。
2,、系統(tǒng)不支持批量證書更新以及批量打印等功能,，在常見的場(chǎng)景中，出具證書是需要進(jìn)行批量導(dǎo)出的過程,。
3,、無法滿足實(shí)時(shí)打印預(yù)覽或者PDF預(yù)覽，這樣直至打印前都無法確定打印的格式,、范圍等是否符合需求。
在這篇分享中,，我們將幫助大家著重解決兩個(gè)問題：

1、在瀏覽器中生成PDF文件,；
2,、解決中文以及特殊字符導(dǎo)出PDF亂碼的問題,。

在瀏覽器中生成PDF文件。前端生成PDF文件純依賴于客戶端的瀏覽器資源，對(duì)于不同的終端,，導(dǎo)出PDF的難度會(huì)比服務(wù)端有所增加,。市面上主流的瀏覽器有三四家,，例如Chrome,、Safari,、FireFox等,，每個(gè)瀏覽器對(duì)于文字內(nèi)容,、CSS屬性處理都不一致,，有可能某些配置在某個(gè)瀏覽器上可行,，換了一個(gè)瀏覽器之后就有可能天差地別,。另外,，對(duì)于原生的PDF文件來說,，僅包含英文字體,，不包含任何中文字體,，因此當(dāng)導(dǎo)出的內(nèi)容中含有中文字體編碼時(shí),，就會(huì)顯示亂碼，所以通常情況下，我們都需要為PDF進(jìn)行字體注冊(cè)操作。

前端常見導(dǎo)出PDF方法

目前常用的前端生成PDF文件的方法大致有以下幾種,。
1、HTML2Canvas的方法將HTML 轉(zhuǎn)換成圖片后,，在將圖轉(zhuǎn)PDF文件,。這種方法比較適合單一頁(yè)面,。
2、jsPDF 直接H5轉(zhuǎn)成PDF,。

除了上述的方案之后,，使用SpreadJS直接在線設(shè)計(jì)布局，并且可以直接生成PDF文件,。 帶來的好處是什么呢,？可視化的操作、代碼量少并且可以適配不同的瀏覽器環(huán)境,。當(dāng)然也會(huì)有一定的缺點(diǎn),，對(duì)于字體較多的文件，需要注冊(cè)不同的字體,，字體文件越大,，占用的帶寬就越大,。另外，當(dāng)文件比較大的時(shí)候,，有可能會(huì)存在性能問題,，不過這個(gè)也幾乎是前端導(dǎo)出PDF文件的一個(gè)瓶頸。那么較為理想的方案便是可以在前端（SpreadJS）設(shè)計(jì),、展示,，最后交由后端來單獨(dú)導(dǎo)出或者批量導(dǎo)出。

在瀏覽器中生成PDF文件

介紹了那么多,，我們還是回到本篇文章的主題,，如何通過前端來生成PDF文件。需要用到SpreadJS以及導(dǎo)出PDF相關(guān)的功能,，首先需要在頁(yè)面上引入相關(guān)的資源,。

然后創(chuàng)建一個(gè)用于承載表格實(shí)例的DOM。

初始化表格控件并加載已設(shè)計(jì)好的表單,，或者也可以通過setValue的接口實(shí)現(xiàn)簡(jiǎn)單的賦值操作,。

想要表單按照指定的要求導(dǎo)出，可以通過代碼設(shè)置打印相關(guān)的配置,，也可以用設(shè)計(jì)器來進(jìn)行設(shè)計(jì),。下面是配置打印信息相關(guān)的代碼。

最后,，通過調(diào)用savePDF方法,，將工作簿對(duì)象轉(zhuǎn)為blob，我們可以通過window.open來進(jìn)行pdf的預(yù)覽或者通過一些保存文件的插件直接將這個(gè)blob保存為PDF文件,。

這是open之后的效果,，我們可以直接通過瀏覽器導(dǎo)出PDF文件或者是調(diào)用瀏覽器的打印接口實(shí)現(xiàn)打印。(demo在附件名為PDF文件夾)

解決中文以及特殊字符導(dǎo)出PDF亂碼

正如前面所說的,，在國(guó)內(nèi),，使用中文的報(bào)告是一件再常見不過的事,，在計(jì)量檢測(cè)等相關(guān)場(chǎng)景，特殊字符的使用也較多。在沒注冊(cè)對(duì)應(yīng)的字體之前，導(dǎo)出的中文字體和特殊字體都顯示的是亂碼。因此，還需要處理導(dǎo)出中文以及特殊字符PDF亂碼的問題。

前面提到了注冊(cè)字體,，那我們的字體應(yīng)該怎么來,？要什么格式的字體呢,？首先,，先確認(rèn)我們的表單需要用到哪些字體,，然后去找對(duì)應(yīng)字體的ttf文件（電腦上或者是一些字體網(wǎng)站上都有,，需注意版權(quán)問題）,。找到之后將其轉(zhuǎn)為base64格式的文件,。具體如何轉(zhuǎn),，可以找一些在線的文件轉(zhuǎn)換器,，不過在線的有可能會(huì)因?yàn)樽煮w文件太大而崩潰,，或者有能力的大佬可以自己寫一個(gè)轉(zhuǎn)換的工具。然后通過下面的方式去把我們的字體文件存儲(chǔ)為一個(gè)js文件放到我們的項(xiàng)目中,。

初始化表單這些就和上面的操作基本一致了,，下面就是關(guān)鍵的注冊(cè)字體步驟了,。我們定義了一個(gè)font對(duì)象,，里面只定義了常規(guī)（normal）的字體,，里面的simkai.ttf就是我們上面的創(chuàng)建的字體文件。

還有一點(diǎn)需要注意的是,，雖然注冊(cè)了字體,，但是要設(shè)置對(duì)應(yīng)的中文字體。或者換過來說,，你需要在表單上設(shè)置什么字體,，就去注冊(cè)對(duì)應(yīng)的字體。
那我們?cè)賮砜纯刺厥庾址?，注?cè)字體與中文字體的步驟是一致的,，特殊在于為了想要在頁(yè)面上顯示特殊字符，我們需要通過css的font-face來指定一個(gè)font-family,。例如創(chuàng)建了一個(gè)叫sunway-font的特殊字體,，想要在頁(yè)面上顯示。

最后就是通過savePDF方法導(dǎo)出PDF文件,，可以看到PDF的中文和特殊字符都可以正常顯示,。

怎么樣？學(xué)“廢”了嗎,？不妨試試,，“卷”起來。

本文所用代碼下載地址：
https://gcdn./forum.php?mod=attachment&aid=MjI5OTEyfDdlNmI2YmExfDE2NjIwMjE0MTd8NjI2NzZ8OTk3MTg%3D