咳咳，好久没有写博了。。。

在工作中遇到了纯前端，将数据导出为excel文件。正文开始：

第一步 安装依赖：

npm i xlsx

第二步 写导出函数：

import XLSX from 'xlsx'

const exportJsonToExcel = (dataArr) => {

    const now = new Date()

    const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//这里的数据是用来定义导出的格式类型

    const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };

    wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataArr);//通过json_to_sheet转成单页(Sheet)数据

    saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), `导出文件-${now.getFullYear()}${now.getMonth() + 1}${now.getDate()}.${wopts.bookType}`);

}

// 导出excel

const saveAs = (obj, fileName) => {

    var tmpa = document.createElement("a");

    tmpa.download = fileName || "下载";

    const href = URL.createObjectURL(obj); //绑定a标签
tmpa.href = href;

    tmpa.click(); //模拟点击实现下载

    setTimeout(function () { //延时释放

        URL.revokeObjectURL(href); //用URL.revokeObjectURL()来释放这个object URL

    }, 100);

}

const s2ab = (s) => {

    if (typeof ArrayBuffer !== 'undefined') {

        var buf = new ArrayBuffer(s.length);

        var view = new Uint8Array(buf);

        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

        return buf;

    } else {

        var buf = new Array(s.length);

        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;

        return buf;

    }

}

export default exportJsonToExcel

第三步 调用exportJsonToExcel方法：

  // 处理下载按钮， 少于1000条，则前端下载

  handleClickDownload = () => {

    exportToExcel(data)

  }

// 其中传入给exportToExcel的数据格式如下：是一个对象的数组，一个对象是一行的数据，key是表头， value是数据

data = [{'联系电话':item.Tel,

                '客户标签':item.CustomerLableValue,

                '客户状态':item.StateValue,

                '距上次跟进(天)':item.OutTrackDay,

                '客户来源':item.SourceValue,

                '业务员':item.SalesmanName,

                '省份':item.ProvinceName,

                '城市':item.CityName,

                '区县':item.CountyName,

                '学历':item.EducationName,

                '性别':item.Gender == 0 ? '男':'女',

                '政治面貌':item.PoliticalOutlookName,

                'QQ':item.QQ,

                '类型':item.Type==1?'个人客户':'企业客户',

                '联系次数':item.ContactNum,

                '微信':item.WeChat,

                '错误信息': item.ErrorInfo

}]

小结：

第三步的调用非常简单，将想要导出的数据格式化一下，传给exportToExcel方法即可。想哪里调用都可以呦。

第二步，让我新学习了两个方法：URL.createObjectURL() 和 URL.revokeObjectURL() ；

objectURL = URL.createObjectURL(blob)：静态方法创建一个字符串，包含blob的url。这个新的url表示指定的File对象或者Blob对象。

                                        每次调用这个方法时候，都会创建一个新的URL对象，即便使用的是相同的参数，因此，需要使用URL.revokeObjectURL() 来释放。

URL.revokeObjectURL(objectURL):   释放需要在使用后释放，如果在使用前释放，则objectURL就为undefined。 举栗子：

<!DOCTYPE html>

<html lang="en">

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <meta charset="UTF-8">

    <title>test url</title>

</head>

<body>

    <p>test revoke before use</p>

    <input type="file" id="test" />

    <br />

    <br />

    <br />

    <p>test use revoke use</p>

    <input type="file" id="test3" />

    <script>

        $('#test').on('change', function (e) {

            var newImg = document.createElement("img");

            var url = URL.createObjectURL(e.target.files[0])

            console.log(url);

            newImg.src = url;

            URL.revokeObjectURL(url); // 这里释放了！没有图片

            document.body.appendChild(newImg);

            console.log(url);

        });

        $('#test3').on('change', function (e) {

            var newImg = document.createElement("img");

            var url = URL.createObjectURL(e.target.files[0])

            newImg.src = url;

            newImg.onload = function () {

                URL.revokeObjectURL(url); // onload时候释放，没有问题，因为已经加载完毕！

                document.body.appendChild(newImg);

            }

        });

    </script>

</body>

</html>
 

前端导出excel数据-jsonToExcel的更多相关文章

  1. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  2. 前端导出Excel

    1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...

  3. 踹掉后端，前端导出Excel！

    前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...

  4. [转] Asp.Net 导出 Excel 数据的9种方案

    湛刚 de BLOG 原文地址 Asp.Net 导出 Excel 数据的9种方案 简介 Excel 的强大之处在于它不仅仅只能打开Excel格式的文档,它还能打开CSV格式.Tab格式.website ...

  5. 前端导出excel表

    前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...

  6. oracle-sql脚本导出EXCEL数据

    在数据库中,经常有业务人员提出需求导出数据库中的业务数据,而且是每天.每周或每月定时导出.为了方便,可将sql查询的脚本 通过下面脚本来导出EXCEL数据. 1.将查询sql脚本(AAA.sql)放到 ...

  7. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  8. flask使用tablib导出excel数据表

    在网页中常常有导出数据的需求,尤其是一下管理类平台.在flask中要导出excel数据表,通常可以使用xlwt库,创建文件并逐行写入数据,但是使用起来总是感觉很麻烦.tablib库相对操作更加方便. ...

  9. vue导出excel数据表格功能

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来. 第一步安装依赖包,需要把代码下载你的项目当中 cnpm install  file-saver c ...

随机推荐

  1. 基于js的数据结构与算法-数组

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  2. emWin录音机，含uCOS-III和FreeRTOS两个版本

    第12期:录音机配套例子:V6-921_STemWin提高篇实验_录音机(uCOS-III)V6-922_STemWin提高篇实验_录音机(FreeRTOS) 例程下载地址: http://forum ...

  3. 基于emWin的WAV，MP3软解软件播放器，带类似千千静听频谱，含uCOS-III和FreeRTOS两个版本

    第9期:WAV,MP3软解播放器,带类似千千静听频谱配套例子:V6-916_STemWin提高篇实验_WAV,MP3软解播放器,带类似千千静听频谱(uCOS-III)V6-917_STemWin提高篇 ...

  4. 开源播放器 ijkplayer (六) ：Android 下使用 ijkplayer 异常处理思路

    一. java.lang.IllegalStateException: mpjni: setOptionLong: null mp 根据已查到的资料看,目前是ijk内部的问题,只能通过try& ...

  5. Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  6. MySQL 数据库字段类型使用说明

    简介 MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型以及字符串(字符)类型. 数值类型 下列用于描述的代码字母中: M表示最大的显示尺寸.最大的合法的显示尺寸是 255 .(注 ...

  7. [Swift]LeetCode436. 寻找右区间 | Find Right Interval

    Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...

  8. [Swift]LeetCode868. 二进制间距 | Binary Gap

    Given a positive integer N, find and return the longest distance between two consecutive 1's in the ...

  9. djang-异步——定时操作

    django本身是一个同步框架,flask也是,所以要把它变成异步操作的话还得专门设置一下 我的这个系统呢是windows系统,python3.7的 所以有的库是不可以兼容的 ,然后到时候会稍微修改一 ...

  10. 『ice 离散化广搜』

    ice(USACO) Description Bessie 在一个冰封的湖面上游泳,湖面可以表示为二维的平面,坐标范围是-1,000,000,000..1,000,000,000. 湖面上的N(1 & ...