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

關(guān)于 PDF.js

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

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

PDF.js 的技術(shù)特性

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

我用 PDF.js 來做什么？

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

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

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

開發(fā)上手體驗和使用建議

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

我的實現(xiàn)方式

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

npm i pdfjs-dist -S

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

<template>
<div class="hello">
    <input
      type="file"
      name="file"
      id="file"
      accept="application/pdf"
      single
      placeholder="請選擇pdf文件"
      @change="handleFile"
    />
    <canvas id="viewer" ref="viewer" :width="width" :height="height"></canvas>
  </div>
</template>
<script>
import { getDocument } from "pdfjs-dist/webpack"; // 注意這里的引入方式

// 省略無關(guān)代碼...
// methods:
    handleFile(e) {
      const reader = new FileReader();
      reader.onload = (evt) => {
        this.init(evt.target.result);
      };

      reader.readAsDataURL(e.target.files[0]);
    },
    async init(path) {
      // 讀取pdf
      let pdf = await getDocument(path).promise; //返回一個pdf對象
      const page = await pdf.getPage(0); // 獲取第一頁
      const viewport = page.getViewport({ scale: 1 });
      const textContent = await page.getTextContent();
      console.log(textContent.items); // 頁面的文章內(nèi)容在這

      const context = this.canvas.getContext("2d");
      // 設(shè)置canvas的尺寸
      this.width = viewport.width;
      this.height = viewport.height;
      await page.render({ canvasContext: context, viewport: viewport }).promise; // 渲染第一頁內(nèi)容
    },

</script>

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

更多建議

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

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

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

免費開源說明

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

↓↓點擊查看本次分享的網(wǎng)站。

PDF.js - 免費開源的 JavaScript 讀取、顯示 PDF 文檔的工具庫，由 Mozilla 開發(fā)并且持續(xù)維護｜那些免費的磚

HT Viewer for Ma是一款輕量級的.mht、.mhtm、.mhtml文檔查看器/閱讀器?？煽焖匍喿x，還支持文本縮放或者放大，支持蘋果芯片，趕快試試吧。

詳情盡在：https://www.macz.com/mac/8152.html?id=ODE3NDU1Jl8mMjcuMTg2LjEyNy4yNTQ%3D

件處理之前的給大家推薦過一些工具，基本上圍繞在PC應用上。本篇的推薦，將文件的查看與管理擴展開來，增加了一些插件或瀏覽器相關(guān)文件管理神器。

01 N3

一款開箱即用的終端文件管理工具，非正統(tǒng)的終端文件管理器，幾乎不需要配置就能用。它的功能全面，運行僅需極少的內(nèi)存。

它支持文件實時預覽、搜索、批量操作文件、排序等功能，同時還能作為插件整合進Vim。

N3源碼：github.com/jarun/nnn

02 Clover 3

這是一款Windows Explorer資源管理器擴展，為瀏覽器增加類似谷歌Chrome的Tab多標簽頁功能。支持Windows 8、Win7以及XP。

Clover提供強大的拖入拖出、窗口分組功能。它通過BHO插件的形式，集成到Windows Explorer，保留你原本的使用習慣，更適合懶人用戶。

官網(wǎng)：cn.ejie.me

03 Filestash

一個在線文件管理工具，可以用你的瀏覽器來管理文件數(shù)據(jù)。

支持在瀏覽器上管理FTP、SFTP、Git、S3、MySQL、Dropbox等服務中的文件和數(shù)據(jù)。功能包含編輯文件、圖片管理、視頻轉(zhuǎn)碼、Office 文檔、全文搜索等。

官網(wǎng)：www.filestash.app

源碼：github.com/mickael-kerjean/filestash

04 Flow Launcher

一款帶有插件的Windows快速文件搜索和應用程序啟動器。支持自定義的熱鍵立即觸發(fā)搜索窗口，幫助你無縫銜接工作流程。

Flow Launcher的功能包含搜索應用程序、文件、書簽、YouTube、Twitter等所有內(nèi)容。

你可以使用F1鍵打開/隱藏預覽面板，媒體文件將顯示為大圖像，或顯示大圖標和整個路徑。也可以通過設(shè)置（始終預覽）永久打開預覽。使用“Ctrl+加號，減號/Ctrl+]，[”可以快速調(diào)整搜索窗口寬度和高度。

官網(wǎng)：www.flowlauncher.com

源碼：github.com/Flow-Launcher/Flow.Launcher

05 Sigma File Manager

一款免費、開源、快速的文件管理器（資源管理器/查找器）應用程序，適用于Windows和Linux。

支持智能搜索、自定義主頁、文件共享、文件下載、智能拖放、文件保護等功能。

源碼：github.com/aleksey-hoffman/sigma-file-manager

06 ChromeCookiesView

Gogole谷歌瀏覽器Cookies查看軟件，無需使用 Google Chrome 瀏覽器的標準內(nèi)部cookie查看器。

它可以幫助你快速查看谷歌瀏覽器存儲的所有cookie的顯示列表，并刪除不需要的內(nèi)容。同時允許你通過文本/CSV/HTML/XML文件導出cookie。

對于每一個cookie，它支持顯示包含主機名、路徑、名稱、值，安全（Yes / No）、HT TP cookie（Yes / No）、最后訪問時間、創(chuàng)建時間、過期時間等信息。

下載：soft.3dmgame.com/down/241378.html

在不同的平臺，管理不同的文件內(nèi)容，查看文件信息、預覽文件內(nèi)容、搜索查找指定文件等，你需要的功能，全了！