国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用FileSaver.js把base64數(shù)據(jù)轉(zhuǎn)成表格并下載

Ryan_Li / 2615人閱讀

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

最近公司項(xiàng)目有一個(gè)需求， 是按行業(yè)要求的一個(gè)“怪異”格式表格下載下來，后端通過表格設(shè)計(jì)器搞了一個(gè)模板，然后填充數(shù)據(jù)， 前端通過接口獲取到返回的base64格式的數(shù)據(jù)，轉(zhuǎn)成表格提供下載，就用到了這個(gè)FileSaver.js
引入 FileSaver.js

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

把base64 轉(zhuǎn)成能下載的文件

先實(shí)現(xiàn)這個(gè)轉(zhuǎn)換方法

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;
}
轉(zhuǎn)換并下載表格數(shù)據(jù) 
// base64Data 是服務(wù)器獲取到的數(shù)據(jù)
let file = b64toFile(base64Data, "test", "application/vnd.ms-excel;charset=utf-8");

// 利用FileSaver.js 下載文件為Excel文件
saveAs(file, "fileName.xls");

是不是so easy 呢？

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104712.html

相關(guān)文章

  • 瀏覽器端用JS實(shí)現(xiàn)創(chuàng)建和下載圖片

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

    blair 評論0 收藏0

  • 前端js實(shí)現(xiàn)字符串/圖片/excel文件下載

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

    DevWiki 評論0 收藏0

  • 前端js實(shí)現(xiàn)字符串/圖片/excel文件下載

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

    ingood 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<