摘要： ElasticPDF 是一款新國(guó)產(chǎn) PDF 編輯器開發(fā)框架，基于開源 pdf.js 的渲染框架，增加了批注功能，支持全離線運(yùn)行，適用于公網(wǎng)及內(nèi)網(wǎng)系統(tǒng)。代碼包結(jié)構(gòu)延續(xù)了 pdf.js-dist 簡(jiǎn)潔的風(fēng)格，兼容所有主流瀏覽器，不僅可以部署于 Web 項(xiàng)目，也可以嵌入任意桌面端和移動(dòng)端項(xiàng)目中。

關(guān)鍵詞： Web PDF編輯器，pdf.js，PDF批注，內(nèi)網(wǎng)可用，任意項(xiàng)目可用

1 技術(shù)優(yōu)勢(shì)

ElasticPDF 延續(xù)了 pdf.js-dist 的架構(gòu)風(fēng)格，全部使用樸素 Javascript 代碼開發(fā)，簡(jiǎn)單來說 是在 pdf.js-dist 代碼包中增加了幾個(gè) js 文件，無需任何在線依賴即可運(yùn)行， 因而非常適合作為功能模塊整合到其他項(xiàng)目中。

不僅可以部署于公網(wǎng)環(huán)境應(yīng)用，獨(dú)立、簡(jiǎn)潔的特點(diǎn)也讓其擁有完全透明和可控的安全性，因而被選擇部署于眾多內(nèi)網(wǎng)系統(tǒng)中。

經(jīng)過多年的研發(fā)，即使是只依賴 HTML，CSS 和 Javascript 運(yùn)行的產(chǎn)品，批注等功能的產(chǎn)品力也已接近世界一流的PDF編輯器（比如 Adobe Acrobat），具體為批注可以以標(biāo)準(zhǔn)格式寫入pdf中，包括注釋的任意語言的文字，之后可以再在其他編輯器中編輯。

另外還可以將 批注獨(dú)立導(dǎo)出為 JSON 格式，便于入庫(kù)和重載回顯，在云端協(xié)同的系統(tǒng)中非常便利和經(jīng)濟(jì)，因?yàn)橹恍枰粋€(gè)在線原文檔和保存數(shù)量級(jí)通常不到 1M 的批注文件，而不再需要把批注合并到文檔中一起保存到后端數(shù)據(jù)庫(kù)，可以節(jié)省很多流量、寬帶和儲(chǔ)存費(fèi)用。

2 在線 Demo 地址

針對(duì)于不同項(xiàng)目的開發(fā)需求，目前有兩個(gè)版本的產(chǎn)品可供選擇（非免費(fèi)） ，兩者在授權(quán)方式和最終批注寫入 PDF 的技術(shù)效果上有區(qū)別，具體以在線 Demo 網(wǎng)站的說明和運(yùn)行效果為準(zhǔn)。

① 批注合成版：https://demos.libertynlp.com/#/pdfjs-annotation

② 標(biāo)準(zhǔn)批注版：https://www.elasticpdf.com/demo

功能概覽.png

3 功能展示

除以下功能外，其他功能也在持續(xù)開發(fā)中，另外幾乎所有功能都可以定制開發(fā)。

3.1 批注功能

① 文本高亮

無論是桌面端、平板端或者手機(jī)都可以精確選擇文本，支持跨頁高亮，高亮后內(nèi)容可以修改顏色等屬性。

1-highlight.gif

② 下劃線

與高亮功能類似，實(shí)現(xiàn)了多種設(shè)備文本的精確選擇，批注生成后可以修改批注顏色、線條粗細(xì)等

2-underline.gif

③ 插入圖片

支持以選取文件或者拖入的方式來插入圖片，之后可以對(duì)圖片的大小、位置、方位、不透明度等實(shí)現(xiàn)流暢的修改

3-insert image.gif

④ 屏幕截圖

繪制矩形框后可截取當(dāng)前文檔的部分內(nèi)容，并可以修改矩形框位置后再次截圖

4-screen shot.gif

⑤ 自由繪制

可以隨意調(diào)整筆刷的大小、顏色和不透明度，然后在文檔上自由的繪制，在設(shè)置不透明度較小時(shí)還可以用來高亮掃描件文本

5-brush.gif

⑥ 添加文本

可以以插入和拖入的方式來創(chuàng)建文本批注，支持所有語言，創(chuàng)建后可以拖動(dòng)的方式修改字體形狀、字體大小等

6-add text.gif

⑦ 多邊形

支持創(chuàng)建箭頭、直線、矩形、圓形（橢圓）、對(duì)勾和身份印章等多邊形，生成后的批注支持顏色、大小、位置方位等的修改

7-polygon.gif

⑧ 超鏈接

通過繪制矩形框或者選取文字后創(chuàng)建超鏈接對(duì)象，之后可以鏈接到 URL、頁碼、在線文檔等

8-hyperlink.gif

3.2 批注管理功能

① 橡皮擦

超強(qiáng)橡皮擦功能，可以局部擦除批注對(duì)象，擦除過程中軌跡可見，且擦除后的文本仍然可編輯

9-eraser.gif

② 撤銷 & 重做 批注

撤銷或者重做批注，包括批注的生成、修改等各類編輯以及刪除等操作

10-undo redo.gif

③ 導(dǎo)出 & 導(dǎo)入 JSON 批注

支持將批注文檔導(dǎo)出為 JSON 文件，之后再次加載 JSON 文件實(shí)現(xiàn)完美的回顯，是多端同步的最佳方案

11-output import annotation.gif

④ 批注連接線 & 雙語

將右側(cè)列表中的批注與頁面的圖形對(duì)象相連，每一頁都單獨(dú)控制；所有頁面操作都支持中英文雙語

12-multilanguage connecting line.gif