背景

在計量領域中，計量檢定是一種重要形式，主要用於評定計量器具的計量性能，確定其量值是否準確一致，實現手段包括計量檢驗、出具檢定證書和加封蓋印等。

在檢定證書這一環節，存在一個難點，就是無法在線預覽以及智能生成。

1、證書管理不能滿足用戶精準打印、特殊字符或多頁打印的需求。因為在計量行業中，精密儀器較多，往往會存在一些特殊字符的應用或者會使用某些較為復雜的測量單位。

2、系統不支持批量證書更新以及批量打印等功能，在常見的場景中，出具證書是需要進行批量導出的過程。

3、無法滿足實時打印預覽或者pdfPDF預覽，這樣隻直至打印前都無法確定打印的格式、范圍等是否符合需求。

在這篇分享中，我們將幫助大傢著重解決兩個問題：

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文件。

13b270b9f58857a5cf3de982ccda0457

這是open之後的效果，我們可以直接通過瀏覽器導出PDF文件或者是調用瀏覽器的打印接口實現打印。(demo在附件名為PDF文件夾)

解決中文以及特殊字符導出PDF亂碼

正如前面所說的，在國內，使用中文的報告是一件再常見不過的事，在計量檢測等相關場景，特殊字符的使用也較多。在沒註冊對應的字體之前，導出的中文字體和特殊字體都顯示的是亂碼。因此，還需要處理導出中文以及特殊字符PDF亂碼的問題。

e72700a2b86856d5ebbd9ed16a536cc0

前面提到瞭註冊字體，那我們的字體應該怎麼來？要什麼格式的字體呢？首先，先確認我們的表單需要用到哪些字體，然後去找對應字體的ttf文件（電腦上或者是一些字體網站上都有，需註意版權問題）。找到之後將其轉為base64格式的文件。具體如何轉，可以找一些在線的文件轉換器，不過在線的有可能會因為字體文件太大而崩潰，或者有能力的大佬可以自己寫一個轉換的工具。然後通過下面的方式去把我們的字體文件存儲為一個js文件放到我們的項目中。

初始化表單這些就和上面的操作基本一致瞭，下面就是關鍵的註冊字體步驟瞭。我們定義瞭一個font對象，裡面隻定義瞭常規（normal）的字體，裡面的simkai.ttf就是我們上面的創建的字體文件。

7b45fdfb023c15d20c0c4b12d269ee86

還有一點需要註意的是，雖然註冊瞭字體，但是要設置對應的中文字體。或者換過來說，你需要在表單上設置什麼字體，就去註冊對應的字體。

那我們再來看看特殊字符，註冊字體與中文字體的步驟是一致的，特殊在於為瞭想要在頁面上顯示特殊字符，我們需要通過css的font-face來指定一個font-family。例如創建瞭一個叫sunway-font的特殊字體，想要在頁面上顯示。

最後就是通過savePDF方法導出PDF文件，可以看到PDF的中文和特殊字符都可以正常顯示。

怎麼樣？學“廢”瞭嗎？不妨試試SpreadJS，“卷”起來。

本文所用代碼下載地址。

更多在線demo示例代碼：http://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html