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

葡萄城技術團隊發表於2021-10-20

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 樣式保留的方法,有新的進展會給大家更新第二篇。

相關文章