初探JavaScript PDF blob轉換為Word docx方法


PDF轉WORD為什么是歷史難題

PDF 轉Word 是一個非常非常普遍的需求,可謂人人忌危,為什么如此普遍的需求,卻如此難行呢,還得看為什么會有這樣的一個需求:

PDF文檔遵循iOS32000的規范是由Adobe 公司推出的文檔格式,之所以應用如此廣泛,是因為PDF精確定位了每個字符的坐標、根據坐標繪制的各種形狀,使用PDF格式傳輸和打印文檔可以保證格式的一致性,然后很多PDF文件是可用於閱讀,展示,打印,但編輯起來是非常困難,如格式調整,文字修改,樣式調整等,那么就衍生了PDF 轉Word這一歷史性的需求,但因為兩者之間采用的編碼規范以及布局機制的完全不一致,導致轉換起來會非常復雜,一般的工具不是格式錯亂,就是內容錯亂,很難達到客戶的原生期望。

其難點在於建立從PDF基於元素位置的格式到Word基於內容的格式的映射。PDF文檔實際並不存在段落、表格的概念,PDF轉Word要做的就是將PDF文檔中“橫、豎線條圍繞着文本”解析為Word的“表格”將“文本及下方的一條橫線”解析為“文本下划線”等等。

兩個工具兩套規則,自古以來兩個工具之間的兼容轉換,除非是為一家所有,會有通用的標准和接口預留,達到很好的兼容性,但 Adobe和微軟都是巨大的科技企業,且兩款軟件功能都是非常強大且覆蓋面全,要做到完美的匹配所有規則更是非常苦難。

對於報表用戶來說,很多用戶會將報表理解為報告,報告自然會聯想到Word,那么就很希望在頁面中展示的內容能夠成 Word 文件來進行存檔,編輯等作用。

ActiveReportsJS 是前端的報表開發工具,不與后端關聯,因此想要將展示的HTML 生成Word,研發團隊經過一些調研發現整個過程會非常復雜非常困難,正如他們反饋:“不是一個sprint 能解決的問題”,就PDF.js背后都有強大的Mozilla支撐,更何況Word文檔是依托微軟的Offic開發組件去生成的。

但在實際接觸客戶的時候,許多用戶都會來詢問相關內容包括如何用報表設計類似審批表、人事履歷表、檢測報告等很常見的Word報告。用戶對結果都比較滿意,但唯一用戶不滿的是報表結果只能生成pdf。 這是傳統,這也是核心需求,也是痛點。

本葡萄就有些很着急,於是不信這個邪,在前端工具如此豐富的情況下,竟沒有一個這樣可用的工具?

開始搜索,打開google,榨干全部腦汁的詞匯量輸入了我需要的關鍵詞,搜索到了以下結果。

乍一看,第一條完全吻合,Node.js 雖說是服務端也不是不可以接受,只要有方案即可。

使用cloudmersive-convert-api-client 實現任意文件格式的轉換

https://cloudmersive.medium.com/how-to-convert-pdf-to-word-docx-format-in-node-js-30291f7c446b

看着非常有戲

代碼簡單:

但仔細看看代碼, **果然老天在為我們送東西的時候都在背后的標好了價格 :

心想如果可以,付費就付費吧, 畢竟我們也是做付費商業軟件的專業er,版權意識還是需要有的。

點擊登錄,用谷歌賬號登陸成功后,即可在項目中引用cloudmersive-convert-api-client 安裝包。

該JS 庫提供了將近幾十種的API及Class用於處理轉換不同的格式文件:除了將PDF轉Word外,還有其他發的文件格式轉換,使用起來也是非常簡單,

轉換結果測評:

可以識別本地的PDF 文件,轉換結果:

  1. 能夠保證90%的格式和樣式,達到要求
  2. 圖片可直接導入
  3. 背景色無法保留
  4. 表格無法直接導入為Word的表格,只能作為但文本
  5. 頁眉頁腳信息無法直接導入為Word的頁眉頁腳,只作為文本
  6. 部分內容丟失

  • 產品價格

因為整個轉換API 只是CloudMersive 的一個API功能,整個產品還附加其他的安全檢驗等功能,因此產品是按月及並發數收費的。大家可自行搜索了解,不過他們網站倒是提供好了幾個文件轉換的工具非常好用,無需登錄直接獲取轉換結果

https://cloudmersive.com/tools

嘗試既然有PDF流直接暴力轉換Word文檔,可否?

通過搜索發現PDF對象流直接用JS 轉換為Word 文件是非常困難的, 而且經過驗證ARJS 導出PDF 文件可以用Word軟件打開,那么突然想到是否可以找一個中間件,將PDF流直接轉換為doc或docx格式,但搜索一番,嘗試之后,只是在.pdf前面加了document.docx.pdf

該方法嘗試失敗。

跟技術大咖聊了之后, 才發現pdf和word雖然本質都是二進制流,但內部的聲明等都是各自文件特有的屬性,因此不能直接轉換,簡而言之就是是什么文件流就只能保存什么文件流。且PDF和Word是兩大技術公司背書,直接轉換得用專業的工具,因此此路不通 。

曲線救Coder: HTML 轉換PDF 大工將成?

於是乎,退而求其次,HTML是萬能的,HTML 可以轉萬物,HTML 轉PDF, HTML 轉圖片,HTML 轉Excel等等等,那么 ActiveReportsJS 提供了可將報表導出為HTML 文件且格式完全一致,那么方法來了,我直接使用HTML 轉 Word不是更方便些?Google搜索果然此類資料比PDF 轉Word多了百倍,而且看代碼也是操作非常簡單:

https://jscodemine.grapecity.com/share/Itym7G5fAUSWY4ffuu2cJw/

只需3步驟:

1.將報表導出HTML
var pageReport = new ARJS.PageReport(); pageReport.load('./BandedReport.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return HTMLExport.exportDocument(pageDocument) })

2.加工HTML 代碼增加office 標記

3.創建 a 標簽,直接下載 doc格式

var fileDownload = document.createElement("a"); document.body.appendChild(fileDownload); fileDownload.href = sourceHTML; fileDownload.download = 'document.doc'; fileDownload.click(); document.body.removeChild(fileDownload);
看看結果:效果很Nice

轉換結果測評:

  1. 樣式丟失,包括字體顏色,背景色,形狀
  2. 圖像丟失
  3. 表格可以直接導入為Word表格
  4. 圖標保留

4.總結

兩種轉化結果總結如下:

通過一番嘗試也算是有一個Workaround,考慮到報告類的報表一般以文本內容為主,樣式也比較朴素,所以使用html到Word轉換不失為一個快速簡潔的方法,大部分需要保存為Word 還是為了進行二次編輯。本葡萄也在努力尋找HTML 轉Word 樣式保留的方法,有新的進展會給大家更新第二篇。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM