基于pdf.js實(shí)現(xiàn)了 pdf 增加并編輯批注的 js 插件庫(kù)踢星,有高亮澳叉、下劃線、插入圖片、矩形耳高、箭頭扎瓶、圓形所踊、文本泌枪、畫(huà)筆等工具,同時(shí)支持寫入批注到pdf中并保存秕岛,為目前純前端 javascript 最佳實(shí)現(xiàn)方案碌燕,僅使用了最新 PDF.js dist 版本,可以十分方便的集成到任意web項(xiàng)目中继薛。
Demo地址
Demo地址在:https://demos.libertynlp.com 修壕,下圖左邊是添加批注和編輯的示例,右邊是功能的介紹遏考。
功能模塊
① 下載文件 : 把批注標(biāo)記保存到pdf文件中
② 文本高亮 : 高亮滑選的文本
③ 文本下劃線 : 給滑選的文本增加下劃線
④ 注釋列表 : 打開(kāi)注釋列表并編輯(復(fù)制/刪除/前往)
⑤ 選中對(duì)象 : 選中批注對(duì)象并修改 (顏色/角度/大小/位置/透明度)
⑥ 插入圖片 : 插入本地圖片
⑦ 畫(huà)筆工具 : 在當(dāng)前頁(yè)面使用畫(huà)筆工具自由繪制
⑧ 文本框工具 : 給當(dāng)前頁(yè)面添加可輸入文本框
⑨ 箭頭工具 : 給當(dāng)前頁(yè)面添加箭頭
⑩ 矩形工具 : 給當(dāng)前頁(yè)面添加矩形框
? 圓形工具 : 給當(dāng)前頁(yè)面添加圓
? 導(dǎo)出注釋 : 導(dǎo)出完整結(jié)構(gòu)Json標(biāo)注,可保存到服務(wù)器并回顯
? 導(dǎo)入標(biāo)注 : 導(dǎo)入完整結(jié)構(gòu)標(biāo)注回顯
? 下載標(biāo)注 : 導(dǎo)出當(dāng)前文件標(biāo)注和評(píng)論為txt格式文檔
? 切換語(yǔ)言 : 切換提示語(yǔ)言至英文
? 幫助文檔 : 打開(kāi)幫助文檔
總結(jié)
僅使用 pdf.js-dist 增加 pdf 注釋最佳解決方案慈鸠,可以在純web端實(shí)現(xiàn)pdf的批注和導(dǎo)出,源碼和Demo地址為 https://demos.libertynlp.com
歡迎持續(xù)關(guān)注灌具,將會(huì)持續(xù)更新pdf.js插件青团,任何pdf.js相關(guān)問(wèn)題,歡迎通過(guò)郵箱:weichaoxu1998@gmail.com 聯(lián)系我咖楣。