［通用］JS實現行動端匯出檔案

1.1 版本依賴

1.2 應用場景

行動端現在支援將 cpt 報表匯出為：Word、Excel、PDF、圖片。效果如下圖所示：

1.3 匯出方案

現行動端提供匯出API，使用者可以透過 JavaScript 程式碼實現行動端匯出檔案的效果。

目前只支援「普通報表」，詳情參見：報表匯出API

四種檔案匯出程式碼如下表所示：

_g().exportReportToExcel('sheet');

_g().exportReportToImage();

_g().exportReportToPDF();

_g().exportReportToWord();

本文範例僅支援在「填報預覽」模式下生效。

2.1 準備範本

開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\銀行存貸匯總.cpt

2.2 新增按鈕元件

1）在最上方插入行，並調整行距。

2）範本上方新增 4 個填報按鈕，從左到右分別用來匯出Word、匯出Excel、匯出PDF、匯出圖片。如下圖所示：

以匯出Word為例，合併 B2、C2 儲存格，並選中新增「按鈕元件」，設定按鈕名稱「匯出Word」、按鈕圖示。

2.3 按鈕新增事件

以匯出 Word 按鈕為例，給按鈕新增一個點選事件，填寫匯出程式碼，如下圖所示。其他 3 個按鈕同理設定，只需要改下程式碼即可。

JavaScript 程式碼見「1.3匯出方案」。

2.4 效果預覽

儲存範本，點選「行動端預覽」，選擇「填報預覽」的方式，使用企業微信掃一掃QRCODE，實際匯出效果如下圖所示：

注：IOS 暫不支援在企業微信中直接匯出PDF。

已完成範本參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\行動端匯出檔案.cpt

點選下載範本：行動端匯出檔案.cpt

4.1 iOS 端已知問題

4.1.1 匯出 Word 亂碼

• APP：匯出 Word 亂碼，暫且不支援第三方應用開啟。

• H5：匯出 Word 亂碼，可以利用 WPS 開啟檔案（第三方整合可能不支援）。具體步驟：在 safari 中開啟>下載檔案>選擇下載的檔案>共享到 WPS Office。

4.1.2 匯出圖片

iOS 端匯出圖片後，可能會出現圖片名稱並非範本名稱的問題。

4.1.3 匯出 Excel 

1）釘釘匯出 Excel 檔案後，中文檔案名稱亂碼，這是釘釘瀏覽器自己解析的問題。

2）H5 匯出 Excel 只能在 Safari 瀏覽器中進行。

操作步驟：預覽範本>在 Safari 中開啟>匯出Excel>選擇查看/接收 Excel 檔案的 APP 。

注：只在V10.4.995 及之後的 H5 插件才支援。

3）現象1：範本中按鈕元件新增匯出 Excel 的 JS 事件，在企業微信/釘釘中使用 H5 效果預覽範本，點選匯出再傳回，再點選寫有 JS 的元件會報錯，傳回目錄預覽其他範本，範本空白。

現象2：儲存格新增匯出 Excel 的 JS 事件，在企業微信/釘釘中使用H5效果預覽範本，點選匯出再傳回，再點選寫有 JS 的儲存格無反應，傳回目錄預覽其他範本，範本空白。

解決方案：

根據掛載範本的類型（預覽/填報/分析），在範本「web屬性」裏進行對應的頁面設定，新增一個「載入結束」的JS事件，即可達到匯出 Excel 後傳回範本能重新載入的效果，不至於二次點選匯出，範本彈出報錯。

「載入結束」的 JS 事件程式碼：window.addEventListener('pageshow', function(){window.location.reload()})

4.1.4 匯出 PDF

H5 匯出 PDF 只能在 Safari 瀏覽器中進行。

操作步驟：預覽範本>在 Safari 中開啟>匯出PDF>選擇查看/接收 PDF 檔案的 APP 。

注：只在V10.4.995 及之後的 H5 插件才支援。

4.2 Android 端已知問題

1）匯出 Excel、PDF 的問題

個人微信中匯出 PDF、Excel 檔案時，如果直接用自帶瀏覽器開啟的話，可能出現對話失效，無法開啟檔案的問題。

現在的解決方案是建議安裝QQ瀏覽器，在QQ瀏覽器中開啟檔案。

2）匯出 Word 的問題

有些機型不支援開啟 doc 檔案，需要手動改檔案後綴名（bin-->doc）。