紹

和往常一樣，jsPDF是一個開源的客戶端的PDF解決方案，在之前的文章中已經介紹過幾個Web端和PDF相關的庫，jsPDF同樣是一個不錯的客戶端PDF引 SDK，你可以通過jsPDF在客戶端完成相關操作，它包含了非常豐富的API，幫助你完成一系列的復雜操作！可以說它是相當領先的HTML5客戶端解決方案了！

Github

https://github.com/MrRio/jsPDF

Github star數17k+,可以說相當受歡迎了！

安裝使用

一般情況下我們會考慮使用包管理，常見的就是npm了，因此安裝非常簡單

npm install jspdf --save

或者也可以使用yarn

yarn add jspdf

接下來就是制作你的文件的時候了

默認導出為a4紙張，縱向，使用毫米表示單位

var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

如果要更改紙張尺寸，方向或單位，可以執行以下操作：

var doc = new jsPDF({
 orientation: 'landscape',
 unit: 'in',
 format: [4, 2]
})
doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

使用UTF-8 / TTF

PDF中的14種標準字體僅限于ASCII代碼頁。如果要使用UTF-8，則必須集成自定義字體，該字體提供所需的字形。jsPDF支持.ttf文件。因此，如果你希望在pdf中使用中文文本，則您的字體必須具有必要的中文字形。因此，請檢查您的字體是否支持所需的字形，否則它將顯示空白而不是文本。

要將字體添加到jsPDF，在/fontconverter/fontconverter.html中使用官網提供的fontconverter。fontconverter將創建一個js文件，其中包含提供的ttf文件的內容作為base64編碼的字符串和jsPDF的附加代碼。你只需將生成的js-File添加到項目中即可。然后，就可以在代碼中使用setFont-method并編寫UTF-8編碼文本。

Angular/Webpack/React等配置

常規操作

import * as jsPDF from 'jspdf'

有些框架，必須像下面這樣

import jsPDF from 'jspdf';

API

jsPDF的api非常豐富，在這里就不提供相關地址了，在Github必然找的到，本文重點不在于介紹jsPDF的用法，將部分API截圖展示，通過名稱大致能猜到一些意思，具體用法需要參考官網文檔：

從截圖來看，其文檔特別的詳細，具體到每一個API在js文件的行數，便于閱讀源代碼，包括參數以及返回值都非常明確：

在線DEMO

官方提供了一個在線demo，可以直接運行代碼，感興趣的可以先嘗試一下：

總結

jsPDF是筆者見過類似產品中較為突出的，幾乎涵蓋了所有PDF相關操作，非常詳細的文檔也讓開發者，輕松上手，在線demo還能快速學習，如果你的項目對PDF的操作比較多，不妨嘗試下jsPDF，唯一需要注意的就是解決字體問題，但是上文也提到過解決方案，感興趣的可以進行體驗！

識HTML5新特性成為一個合格的web前端開發工程師! HTML5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再于2007年獲W3C接納，并成立了新的html工作團隊。在2008年1月22日，第一份正式草案發布。 WHATWG表示該規范是目前仍在進行的工作，仍須多年的努力。目前Firefox、Google Chrome、Opera、Safari(版本4以上)、Internet Explorer 9已支援HTML5技術。

1、讓Web再次回歸到客戶端地步，而且更加的獨立，減少了對第三方插件的依賴。

比如：之前的html4的標準中并沒有對于視頻、音頻以及其他的富客戶端技術支持的非常好，這就使得Flash和SilverLight變得異 常的成功。而在HTML5新標準中原生的就支持音頻、視頻、畫布等技術。讓我們的WEB程序擁有更多富客戶端表現的方式，而且讓我們的WEB程序更加獨 立，更好的適應多種形式的客戶端。

2、對本地離線存儲的更好的支持

由于之前想在客戶端保存一些數據都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

HTML5提供了兩種在客戶端存儲數據的新方法：

localStorage - 沒有時間限制的數據存儲

sessionStorage - 針對一個 session 的數據存儲

在 HTML5中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。

對于不同的網站，數據存儲于不同的區域，并且一個網站只能訪問其自身的數據。

HTML5使用 Java 來存儲和訪問數據。有了本地數據庫的支持，讓一些簡單的離線應用也成為了可能。

3、新的特殊內容元素，更好的支持SEO以及方便視障人士使用

現在所有的站點基本上都是Div+CSS布局，幾乎所有的文章標題、內容、輔助介紹等都用Div容器來承載。搜索引擎在抓取頁面內容時，因為沒 有明確的容器的含義只能去猜測這些標簽容器承載的是文章標題還是文章內容等，HTML5新標準中直接添加了擁有具體含義的html標簽比 如：article、footer、header、nav、section

4、更加智能的表單標簽

之前的表單標簽，僅僅是簡單的類型的約束，比如文本框、文本域、下拉列表等，而跟業務結合緊密的表單標簽數據校驗等控制都沒有很好的支持，而是 用這些技術都基本上都是跟第三方的JS控件進行結合使用，但是這些第三方總會涉及到版本控制、瀏覽器兼容性、非標準等一系列的問題，而在HTML5的標準 中直接添加了智能表單，讓這一切都變得那么的簡單，比如 calendar、date、time、email、url、search。

5、HTML5即時二維繪圖 ,也就是畫布的引入，讓Java子彈飛

畫布的引入使得：Web端生成動畫效果、制作Web游戲、更好的交互體驗設計都增加了無限的變數，當社區充斥著亂七八糟超炫的HTML5的JS 控制的效果的時候，讓人無限的贊嘆。HTML5的canvas 元素使用Java 在網頁上繪制圖像。畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

6、JS嗑藥了，支持多線程

在不影響UI update 及 瀏覽器與用戶交互的情況下, 前端做大規模運算，只能通過 setTimeout 之類的去模擬多線程 。而新的標準中，JS新增的HTML5 Web Worker對象原生的就支持多線程。

7、WebSockets讓跨域請求、長連接、數據推送等一切都變得那么簡單，Web不僅僅是Ajax

WebSockets是在一個(TCP)接口進行雙向通信的技術，PUSH技術類型。WebSocket是HTML5規范新引入的功能，用于解 決瀏覽器與后臺服務器雙向通訊的問題，使用WebSocket技術，后臺可以隨時向前端推送消息，以保證前后臺狀態統一，在傳統的無狀態HTTP協議中， 這是“無法做到”的。

8、更好的異常處理

HTML5 (text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的完整規則，讓不同的瀏覽器即使在發生語法錯誤時也能返回完全相同的結果。

9、文件API讓文件上傳和操縱文件變得那么簡單

由于項目中經常遇到用Web應用中控制操作本地文件，而之前都是使用一些富客戶端技術比如flash，ActiveX，Silverlight 等技術，面對文件JS就是個shit，就是個雞肋。在HTML5的新的提供的FHTML5 File API 讓JS可以輕松上陣了。

10、編輯、拖放、微數據、瀏覽歷史管理、地理信息接口API、設備硬件操作API等很多的新功....

HTML5的未來?

當然HTML5不是孤立的，Java API的增強，讓JS變成異常強大的未來的編程武器。CSS3帶給未來Web應用也是極大的新的挑戰。相信由于HTML5標準化的支持，相信未來Web技 術真正的可以跑在任何的端，也讓我們的Web應用更加的獨立，更加的輕松的融入到各個端中，HTML5就是未來!

總結：

通過上面HTML5的新特點，不難總結出HTML5=Java+HTML+CSS。HTML5的新特性帶給開發者的是更友好更豐富的本地處理的API，更智能的更優雅的html標簽，更強的本地處理的功能，通信也進一步加強。

Google很早之前就意識到了，客戶只要擁有一個瀏覽器就可以了，相信不久的將來現在的Web的應用不在對本地處理那么雞肋，CS形式的客戶端相信也會越來越少。

希望以上對你將要學習HTML5或即將從事html的你有所幫助!百通IT學院HTML5培訓機構有著國內首家完整的移動web前端開發課程體系，高度專注移動端。百通IT學院HTML5培訓課程開發項目全部來自于真實的企業項目，單獨項目代碼量超過 5 萬行。為了讓學員盡快的進入到企業開發的項目中，百通IT學院使用自主開發的產品和為客戶定制的企業產品為案例，大批百通IT學院html5培訓班學員都從中收益。

我們是 一群熱愛IT的年輕人，如果你也愛IT、愛HTML5開發，歡迎前來百通IT學院HTML5培訓機構中心參觀學習，讓我們共同為夢想發聲。

百通IT學院十月份即將有免費的公開課了。屆時我就會在這里通知給大家哦，請關注。

這些課程會比網上的那些錄制的公開課效果更好！！而且全程有互動教學。。