最近新項目需要處理 PDF，研究了 PDf.js 之后覺得很不錯，于是寫篇文章推薦給大家。

PDF.js 的功能和它的名字一樣簡單，是一個使用 HTML5 技術來讓前端網頁支持讀取、解析和顯示 PDF 文檔的 JS 工具庫。這個項目由大名鼎鼎的 Mozilla 組織開發(fā)并且更新維護著，沒錯，就是那個開發(fā)了火狐瀏覽器的 Mozilla。所以 pdf.js 也內置在 Firefox 的 19+ 版本中，也是火狐瀏覽器的默認 PDF 處理工具。

一般來說，要查看 PDF 文檔，我們需要一個 PDF 閱讀器軟件，而通過 PDF.js 可以在瀏覽器中直接顯示和處理 PDF 文檔，無論是在線瀏覽、存檔或者其他基于 PDF 的功能都可以實現。

• 功能強大，內置了很多實用的 api，幾乎可以對 PDF 文件“為所欲為”；
• 兼容性超好，不僅支持現代瀏覽器，對于舊版本的瀏覽器也有很好的支持；
• 易于上手，官方也提供了很多代碼例子。

如果只是為什么顯示 PDF 文檔，其實大部分情況下瀏覽器都支持直接打開 PDF，之前碰到要顯示 PDF 的需求，都是直接在瀏覽器新標簽打開。

不過就在上周，我接到了一個需求，要在網頁上支持導入 PDF 文件，轉化成圖片保存到后端，并且還要提取 PDF 文檔中的文字。于是我就開始研究 PDF.js ，了解之后發(fā)現這個工具庫非常強大，完全可以滿足我的需求，那些在線轉換 PDF 的工具實際上都是基于 PDF.js 開發(fā)的。

我要處理的文檔有一部分是發(fā)票，其實里面的文字并不是圖片，而是可以選擇的，這種類型的文檔通過 PDF.js 甚至可以直接獲取文字的內容，OCR 識別的過程都免了，實在太棒了。

要開始使用 PDF.js ，可以直接從項目下載源碼，然后在頁面中引入 pdf.js ，就可以按照代碼例子那些來使用了。

我的實現方式

我是在 Vue 項目中使用，所以我選擇用 npm 安裝的方式：

然后在 Vue 頁面中引入 PDF.js，注意這里的引入方式，需要在包名后加上 /webpack ，否則會報錯，原因我也沒有去深入排查。

上面這段代碼就是我項目 demo 中的一部分，可以實現讀取 PDF 文檔中的頁面和文字，代碼的末尾把第一頁渲染到了 canvas 中，想要轉成圖片，只要把 canvas 中的內容轉成 PNG 圖片即可，區(qū)區(qū)十來行代碼，非常簡單。

更多建議

除了提取文章和轉成圖片，PDF.js 還很多強大的功能，比如可以實現頁面導航，預覽時加入縮放、滾動、旋轉和手寫等注釋以及實現打印、另存為等操作。

還有些付費軟件的功能是壓縮 PDF 文檔，PDF.js 也可以壓縮處理超大型的 PDF 文檔，技術原理是把文檔中沒有使用的結構、元素和對象刪除，大大簡化文檔，從而起到壓縮的效果。

總之，想要在項目處理 PDF，PDF.js 是首選，并且目前沒有看到類似好用并且強大的 JS 庫，反而很多 PDF 工具都是基于 PDF.js 二次封裝的。

Mozilla 組織本身是一個非營利性組織，成立以來一直致力于推動瀏覽器的良好發(fā)展，PDF.js 也不例外，是一個免費開源的項目，源碼基于 Apache 2.0 許可托管在 Github 上，任何人都可以免費下載來使用，用在商業(yè)項目也完全沒問題。

原文鏈接：https://www.thosefree.com/pdfjs