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

在工作中遇到了纯前端，将数据导出为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. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  2. Edge Intelligence: On-Demand Deep Learning Model Co-Inference with Device-Edge Synergy

    边缘智能:按需深度学习模型和设备边缘协同的共同推理 本文为SIGCOMM 2018 Workshop (Mobile Edge Communications, MECOMM)论文. 笔者翻译了该论文. ...

  3. ubuntu Pycharm 2017 3.3 Active

    1.打开激活窗口 2.选择 Activate new license with License server (用license server 激活) 3.在 License sever addres ...

  4. 【RL-TCPnet网络教程】第27章 DNS域名系统基础知识

    第27章      DNS域名系统基础知识 本章节为大家讲解DNS(Domain Name System,域名系统),通过前面章节对TCP和UDP的学习,需要大家对DNS也有个基础的认识. (本章的知 ...

  5. Java线程池核心原理剖析

    在系统开发时,我们经常会遇到“池”的概念.使用池一种以空间换时间的做法,通常在内存中事先保存一系列整装待命的对象,以供后期供其他对象随时调用.常见的池有:数据库连接池,socket连接池,线程池等.今 ...

  6. sweetalert提示框

    文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...

  7. [Swift]LeetCode700. 二叉搜索树中的搜索 | Search in a Binary Search Tree

    Given the root node of a binary search tree (BST) and a value. You need to find the node in the BST ...

  8. Python爬虫入门教程 23-100 石家庄链家租房数据抓取

    1. 写在前面 作为一个活跃在京津冀地区的开发者,要闲着没事就看看石家庄这个国际化大都市的一些数据,这篇博客爬取了链家网的租房信息,爬取到的数据在后面的博客中可以作为一些数据分析的素材. 我们需要爬取 ...

  9. 从0打卡leetcode之day 3 -- 最大子序列和

    前言 就有要把leetcode的题刷完,每天一道题,每天进步一点点 从零打卡leetcode之day 3 题目描述: 给定一个int类型的数组,求最大子序列的和. 也就是说,从这个数组中截取一个子数组 ...

  10. Django里URL配置中name参数的作用

    先看一下URL配置,新增了如下内容: 修改视图views.py 增加一个页面 现在要求是在name页面里面增加一个链接,显示详细信息.修改name页面 这个功能实现了,可是之前添加的那个name参数是 ...