使用FileSaver.js把base64資料轉成表格並下載
阿新 • • 發佈:2021-10-25
使用FileSaver.js把base64資料轉成表格並下載
最近公司專案有一個需求, 是按行業要求的一個“怪異”格式表格下載下來,後端通過表格設計器搞了一個模板,然後填充資料, 前端通過介面獲取到返回的base64格式的資料,轉成表格提供下載,就用到了這個FileSaver.js
引入FileSaver.js
在HTML頁面引入, 我採用的是cdn引入
<script src="http://cdn.staticfile.org/FileSaver.js/1.3.8/FileSaver.min.js"></script>
複製程式碼
把base64 轉成能下載的檔案
先實現這個轉換方法
function b64toFile(b64Data, filename, contentType) {
let sliceSize = 512;
let byteCharacters = atob(b64Data);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);
let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
let file = new File(byteArrays, filename, {type: contentType});
return file;
}
複製程式碼
轉換並下載表格資料
// base64Data 是伺服器獲取到的資料
let file = b64toFile(base64Data, 'test', 'application/vnd.ms-excel;charset=utf-8');
// 利用FileSaver.js 下載檔案為Excel檔案
saveAs(file, "fileName.xls");
複製程式碼
是不是so easy 呢?