使用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 呢？