JS 筆記 | javascript下載
看到上方這張圖片,如果喜歡的話會怎麼儲存呢?沒錯~就是在圖片上點選右鍵並且選擇「另存圖片」下載它,那該怎麼做?在a連結中即可實現W3School的範例程式碼:1
看到上方這張圖片,如果喜歡的話會怎麼儲存呢?
沒錯~就是在圖片上點選右鍵並且選擇「另存圖片」下載它,那該怎麼做?
在 a 連結中即可實現W3School 的範例程式碼:
1<a href="/images/myw3schoolsimage.jpg" download></a>只要在 image 資料中的檔案,透過 a 連結,最後加上 download 屬性就可以完成這個功能。
但是今天 PM 跑來說:「客戶那邊要求在表單下方要有一個按鈕,表單所產生的 data 的資料,按下按鈕可以下載,然後這個檔案要用 excel 打開。」
所以獲得以下資訊:
有一個按鈕。 會有 data 資料產生。 有下載功能。 要用 excel 可以打開的格式。這時馬上請教 Google 大神,然後找到了 Blob,跟想起來好像 excel 匯出有一個叫做 CSV 格式檔案,會用來匯入的。
CSV 逗號分隔值逗號分隔值(Comma-Separated Values,CSV,有時也稱為字元分隔值,因為分隔字元也可以不是逗號),其檔案以純文字形式儲存表格資料(數字和文字),更多請看維基百科[1]。
BlobMDN[2] 這樣解釋:Blob(Binary Large Object)物件代表了一個相當於檔案(原始資料)的不可變物件。Blob 中的資料並不一定是 JavaScript 原生的格式。File 介面基於 Blob,繼承 blob 並擴充其功能以支援操作使用者系統上的檔案。
看一下程式碼:
HTML1<button class="downloadBtn">Download File</button>JavaScript綁定 button 與建立監聽事件 click,
12let downloadBtn = document.querySelector(".downloadBtn");downloadBtn.addEventListener("click", downloadFile);在函式 downloadFile(); 寫入要下載...