如何將 Word/Excel 等檔案內容貼到網頁上

源自前陣子我們家業務問的問題:「客戶原來的系統能將 Excel 儲存格內容貼到網頁上,我們辦得到嗎?」。

實際上當然是肯定的,但還真的沒有特別嘗試過該如何做到,花了點時間研究發現也沒那麼困難,也把一些種點整理一下,以免以後自己忘記。

監聽 Paste 事件

首先當然是要監聽「貼上」的事件,這非常簡單,在能夠接受貼上內容的元素上監聽 paste 事件即可。

document.addEventListener('paste', event => {
  console.log(event);
})

接著讓我們來分析一下貼上的事件資訊。

分析 ClipboardEvent 資訊

監聽 paste 事件後,我們會收到一個型別為 ClipboardEvent 的事件物件,其中的 clipboardData 屬性包含了我們需要的所有資訊。

透過 types 取得貼上的類型

隨著貼上的內容不同,在 clipboardData.types 可能呈現不同的類型,我們可以根據各種類型來決定要如何處理貼上的內容。

console.log(event.clipboardData.types);

當複製一份網頁資料後貼上時,結果為:

["text/plain", "text/html"]

當複製一份 Excel 的儲存格內容後貼上時,結果為:

["text/plain", "text/html", "text/rtf", "Files"]

當複製一份 Word 的內容後貼上時,結果為:

["text/plain", "text/html", "text/rtf", "Files"]

如果是直接複製一個檔案貼上,結果為:

["Files"]

透過 getDate 取得貼上的內容

透過 getData,可以根據某個貼上的資料類型來取得貼上內容。

以 Excel 為例,如果希望將貼上的表格內容顯示在畫面上,只要取得其中的 HTML 內容(text/html),並解析出其中的 table 標籤即可

const data = event.clipboardData.getData('text/html');
const element = document.createElement('foo');
element.innerHTML = data;
const tableElm = element.querySelector('table');

取得檔案

如果貼上的是檔案,可以從 items 取得檔案內容,例如:

const file = event.clipboardData.items[0].getAsFile();

取得的物件為一個 File,接著就看要讀取檔案內容,還是用來上傳都沒問題!

相關資源

如果您覺得我的文章有幫助,歡迎免費成為 LikeCoin 會員,幫我的文章拍手 5 次表示支持!
[Inno Setup] CI 時自動產生安裝檔(以 Azure DevOps 為例)
[Angular 進階議題] 減少 moment.js 造成 bundle 檔案過大的問題

有任何問題或建議嗎?歡迎留言給我