使用FileSaver.js把base64數據轉成表格并下載

Ryan_Li 發布于2019-08-23 18:07 / 2617人閱讀

摘要：最近公司項目有一個需求，是按行業要求的一個怪異格式表格下載下來，后端通過表格設計器搞了一個模板，然后填充數據，前端通過接口獲取到返回的格式的數據，轉成表格提供下載，就用到了這個引入在頁面引入，我采用的是引入把轉成能下載的文件先實現這個轉換方

最近公司項目有一個需求， 是按行業要求的一個“怪異”格式表格下載下來，后端通過表格設計器搞了一個模板，然后填充數據， 前端通過接口獲取到返回的base64格式的數據，轉成表格提供下載，就用到了這個FileSaver.js

引入 FileSaver.js

在HTML頁面引入，我采用的是cdn引入

把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 呢？

GPU云服務器云服務器 base64數據 js base64數據顯示 base64 js把數據轉成json格式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104712.html

瀏覽器端用JS實現創建和下載圖片

摘要：尤其是通過生成文件內容，然后通過瀏覽器端執行下載的操作。日前，項目中就遇到了這類需求，在瀏覽器端實現保存當前網頁為圖片，然后還可以下載。提供了一種創建對象的方法，但是兼容性堪憂，絕大部分瀏覽器都沒有實現。問題場景在前端很多的項目中，文件下載的需求很常見。尤其是通過JS生成文件內容，然后通過瀏覽器端執行下載的操作。如圖片，Execl 等的導出功能。日前，項目中就遇到了這類需求，在瀏覽...

blair 2019-08-23 14:47 評論0 收藏0
前端js實現字符串/圖片/excel文件下載

摘要：實現并發請求實現并發請求生成并下載字符串文件首先我們需要了解一個特殊的數據格式。如果類型未知，則該值為空字符串。表示狀態的數字。一旦完成，屬性中將包含一個字符串以表示所讀取的文件內容。在web開發中，如果你想讓用戶下載或者導出一個文件，應該怎么做呢？傳統的做法是在后端存儲或者即時生成一個文件來提供下載功能，這樣的優勢是可以做權限控制、數據二次處理，但缺點是需要額外發起請求、增大服務端...

DevWiki 2019-08-23 15:11 評論0 收藏0
前端js實現字符串/圖片/excel文件下載

摘要：實現并發請求實現并發請求生成并下載字符串文件首先我們需要了解一個特殊的數據格式。如果類型未知，則該值為空字符串。表示狀態的數字。一旦完成，屬性中將包含一個字符串以表示所讀取的文件內容。在web開發中，如果你想讓用戶下載或者導出一個文件，應該怎么做呢？傳統的做法是在后端存儲或者即時生成一個文件來提供下載功能，這樣的優勢是可以做權限控制、數據二次處理，但缺點是需要額外發起請求、增大服務端...

ingood 2019-07-25 14:39 評論0 收藏0