最近新項目需要處理 PDF，研究了 PDf.js 之后覺得很不錯，于是寫篇文章推薦給大家。
PDF.js 的功能和它的名字一樣簡單，是一個使用 HTML5 技術(shù)來讓前端網(wǎng)頁支持讀取、解析和顯示 PDF 文檔的 JS 工具庫。這個項目由大名鼎鼎的 Mozilla 組織開發(fā)并且更新維護(hù)著，沒錯，就是那個開發(fā)了火狐瀏覽器的 Mozilla。所以 pdf.js 也內(nèi)置在 Firefox 的 19+ 版本中，也是火狐瀏覽器的默認(rèn) PDF 處理工具。
一般來說，要查看 PDF 文檔，我們需要一個 PDF 閱讀器軟件，而通過 PDF.js 可以在瀏覽器中直接顯示和處理 PDF 文檔，無論是在線瀏覽、存檔或者其他基于 PDF 的功能都可以實(shí)現(xiàn)。
- 功能強(qiáng)大，內(nèi)置了很多實(shí)用的 api，幾乎可以對 PDF 文件“為所欲為”；
- 兼容性超好，不僅支持現(xiàn)代瀏覽器，對于舊版本的瀏覽器也有很好的支持；
- 易于上手，官方也提供了很多代碼例子。
如果只是為什么顯示 PDF 文檔，其實(shí)大部分情況下瀏覽器都支持直接打開 PDF，之前碰到要顯示 PDF 的需求，都是直接在瀏覽器新標(biāo)簽打開。
不過就在上周，我接到了一個需求，要在網(wǎng)頁上支持導(dǎo)入 PDF 文件，轉(zhuǎn)化成圖片保存到后端，并且還要提取 PDF 文檔中的文字。于是我就開始研究 PDF.js ，了解之后發(fā)現(xiàn)這個工具庫非常強(qiáng)大，完全可以滿足我的需求，那些在線轉(zhuǎn)換 PDF 的工具實(shí)際上都是基于 PDF.js 開發(fā)的。
我要處理的文檔有一部分是發(fā)票，其實(shí)里面的文字并不是圖片，而是可以選擇的，這種類型的文檔通過 PDF.js 甚至可以直接獲取文字的內(nèi)容，OCR 識別的過程都免了，實(shí)在太棒了。
要開始使用 PDF.js ，可以直接從項目下載源碼，然后在頁面中引入 pdf.js ，就可以按照代碼例子那些來使用了。
我的實(shí)現(xiàn)方式
我是在 Vue 項目中使用，所以我選擇用 npm 安裝的方式：
然后在 Vue 頁面中引入 PDF.js，注意這里的引入方式，需要在包名后加上 /webpack ，否則會報錯，原因我也沒有去深入排查。
上面這段代碼就是我項目 demo 中的一部分，可以實(shí)現(xiàn)讀取 PDF 文檔中的頁面和文字，代碼的末尾把第一頁渲染到了 canvas 中，想要轉(zhuǎn)成圖片，只要把 canvas 中的內(nèi)容轉(zhuǎn)成 PNG 圖片即可，區(qū)區(qū)十來行代碼，非常簡單。
更多建議
除了提取文章和轉(zhuǎn)成圖片，PDF.js 還很多強(qiáng)大的功能，比如可以實(shí)現(xiàn)頁面導(dǎo)航，預(yù)覽時加入縮放、滾動、旋轉(zhuǎn)和手寫等注釋以及實(shí)現(xiàn)打印、另存為等操作。
還有些付費(fèi)軟件的功能是壓縮 PDF 文檔，PDF.js 也可以壓縮處理超大型的 PDF 文檔，技術(shù)原理是把文檔中沒有使用的結(jié)構(gòu)、元素和對象刪除，大大簡化文檔，從而起到壓縮的效果。
總之，想要在項目處理 PDF，PDF.js 是首選，并且目前沒有看到類似好用并且強(qiáng)大的 JS 庫，反而很多 PDF 工具都是基于 PDF.js 二次封裝的。
Mozilla 組織本身是一個非營利性組織，成立以來一直致力于推動瀏覽器的良好發(fā)展，PDF.js 也不例外，是一個免費(fèi)開源的項目，源碼基于 Apache 2.0 許可托管在 Github 上，任何人都可以免費(fèi)下載來使用，用在商業(yè)項目也完全沒問題。文章來源：http://www.zghlxwxcb.cn/news/detail-810898.html
原文鏈接：https://www.thosefree.com/pdfjs文章來源地址http://www.zghlxwxcb.cn/news/detail-810898.html
到了這里，關(guān)于PDF.js - 免費(fèi)開源的 JavaScript 讀取、顯示 PDF 文檔的工具庫，由 Mozilla 開發(fā)并且持續(xù)維護(hù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
