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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,144评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,112评论 0 2
  • 从初中到大学,我有整整十一本日记,回老家的时候,拿锁打开自己的柜子,还能够看到那些本子整齐的码在一起。是从什么时候...
    手语心言阅读 347评论 4 2
  • 身边有一对让人羡慕的情侣。男生长得特别帅,端正的五官,气质迷人。而小姑娘长相普通又一般。 我第一次见这个男生,是被...
    曹小力阅读 1,110评论 2 9