​ 严格意义来说并不是真正的excel文件,只是可以用excel打开查看而已,实际上的格式是逗号分隔文件即csv文件。

这里有几个坑要说一下:

  1. 不加Unicode的utf8头部标识excel打开文件会乱码。
  2. 加了Unicode的utf8头部标识可能会导致文件读取的时候遇到非法字符。
  3. IE不支持a标签的download属性。
  4. 这里用的是URL编码,还可以使用base64和blob。

Unicode头部标识:

EF BB BF UTF-8

FF FE UTF-16 aka UCS-2, little endian

FE FF UTF-16 aka UCS-2, big endian

00 00 FF FE UTF-32 aka UCS-4, little endian.

00 00 FE FF UTF-32 aka UCS-4, big-endian.

/*
data = {
thead : ["第一列", "第二列", "第三列"],
tbody : [
["1", "2", "3"],
["4", "5", "6"],
]
}*/
/**
* 导出excel和csv
* @param data 要导出的数据,需要是上面的数据格式,当然也可以重写这个方法自己定义数据格式
* @param name 文件名
* @param type 文件类型 xls或csv
* @returns
*/
function exportData(data, name, type) {
var dataStr = "";
//Unicode头部标识
var utf8Head = "%EF%BB%BF";
//uri文件资源类型
var csvUri = "data:text/csv;charset=utf-8,";
var xlsUri = "data:application/vnd.ms-excel;charset=utf-8,";
//创建一个a标签,用来下载
var oa = document.createElement("a");
var col = data.thead.length;
var row = data.tbody.length; //数据构造
for(var i = 0; i < col; i++) {
dataStr += data.thead[i];
if(i < col - 1)
dataStr += ","
}
dataStr += "\n"; for(var i = 0; i < row; i++) {
for(var j = 0; j < col; j++) {
dataStr += data.tbody[i][j];
if(j < col - 1)
dataStr += ",";
}
dataStr += "\n";
}
if(type === "csv") {
//拼接编码,用url编码就可以,layui就是这种方式
oa.href = csvUri + utf8Head + encodeURIComponent(dataStr);
oa.download = name + ".csv";
} else if(type === "xls") {
oa.href = xlsUri + utf8Head + encodeURIComponent(dataStr);
oa.download = name + ".xls";
} else {
return false;
}
//触发链接点击事件进行下载
oa.click();
}

js原生导出excel和csv的更多相关文章

  1. 【转】js 中导出excel 较长数字串会变为科学计数法

    [转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...

  2. Java导出Excel和CSV(简单Demo)

    Java导出Excel和CSV的简单实现,分别使用POI和JavaCSV. JavaBean public class ReportInfo { int id; String date; int nu ...

  3. js前端导出excel:json形式的导出

    第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...

  4. js前端导出excel

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

  5. js导入导出excel

    导入: <html xmlns="http://www.w3.org/1999/xhtml" > <head>      <title>Unti ...

  6. js一键导出Excel

    HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...

  7. js 中导出excel 较长数字串会变成科学计数法

    在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...

  8. js 中导出excel 较长数字串会变成科学计数法(转载)

    在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...

  9. php 多语言(UTF-8编码)导出Excel、CSV乱码解决办法之导出UTF-8编码的Excel、CSV

    新项目,大概情况是这样的:可能存在多国.不同语种使用者,比喻有中文.繁体中文,韩文.日本等等,开发时选择了UTF-8编码,开发顺利,没有问题.昨天做了一个csv导出功能,导出的东西完全乱了: 设置mb ...

随机推荐

  1. 《挑战30天C++入门极限》C++运算符重载赋值运算符

        C++运算符重载赋值运算符 自定义类的赋值运算符重载函数的作用与内置赋值运算符的作用类似,但是要要注意的是,它与拷贝构造函数与析构函数一样,要注意深拷贝浅拷贝的问题,在没有深拷贝浅拷贝的情况下 ...

  2. ICEM-蜗壳

    原视频下载地址:https://yunpan.cn/cY8XxpyLN4QaE  访问密码 a792

  3. 如何画好ER图

    快速阅读 了解ER图的基本组成,以及如何在viso中画ER图. 什么是ER图 是实体关系图,用矩形表示实体,用椭圆形表示属性,用棱形表示两实体之间的联系.相互用直接联接起来,是一种数据建模工具.用来描 ...

  4. Anaconda3自带jupyter

    1.cmd命令行中输入 JupyterNotebook 2.系统自动调起下面页面(注册端口冲突是打不开的)

  5. 【软工实践】团队Git现场编程实战

    组长博客链接 博客链接 组员职责分工 队员 职责分工 恩泽 进行任务的划分与安排,调用API,负责餐饮商铺及商圈信息的获取 金海 解析API返回的json数据,提取有关信息 君曦 部分算法编写 季城 ...

  6. Java RMI实践

    Java远程方法调用,即Java RMI(Java Remote Method Invocation).一种用于实现远程过程调用的应用程序编程接口.客户机上运行的程序可以调用服务器上的对象. 缺点:只 ...

  7. Java实现简单RPC框架(转)

    一.RPC简介 RPC,全称Remote Procedure Call, 即远程过程调用,它是一个计算机通信协议.它允许像本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用).H ...

  8. 如何发布H5界面可以让公网访问

    本文链接:https://blog.csdn.net/u013310119/article/details/81233560问题背景:手机APP里的H5界面要发布到公网,提供给第三方APP调用. 解决 ...

  9. 数据分析入门——IPython入门

    一.什么是IPython IPython的开发者吸收了标准解释器的基本概念,在此基础上进行了大量的改进,创造出一个令人惊奇的工具.在它的主页上是这么说的:“这是一个增强的交互式Python shell ...

  10. 【Mybatis】MyBatis之配置自定义数据源(十一)

    本例是在[Mybatis]MyBatis之配置多数据源(十)的基础上进行拓展,查看本例请先学习第十章 实现原理 1.扩展Spring的AbstractRoutingDataSource抽象类(该类充当 ...