使用FileSaver.js把base64数据转成表格并下载

Ryan_Li 发布于2019-08-23 18:07 / 2566人阅读

摘要：最近公司项目有一个需求，是按行业要求的一个怪异格式表格下载下来，后端通过表格设计器搞了一个模板，然后填充数据，前端通过接口获取到返回的格式的数据，转成表格提供下载，就用到了这个引入在页面引入，我采用的是引入把转成能下载的文件先实现这个转换方

最近公司项目有一个需求， 是按行业要求的一个“怪异”格式表格下载下来，后端通过表格设计器搞了一个模板，然后填充数据， 前端通过接口获取到返回的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格式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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