网页前端导出CSV，Excel格式文件
通过自己实际测试有以下几种方法
方法一通过a标签实现，把要导出的数据用“\n”和“,”拼接成一个字符串，然后把字符串放到href中，这种方法只支持chrome，firefox等非ie浏览器
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>导出CSV文件</title>
<script>
function exportCsv(obj){
//title ["","",""]
var title = obj.title;
//titleForKey ["","",""]
var titleForKey = obj.titleForKey;
var data = obj.data;
var str = [];
str.push(obj.title.join(",")+"\n");
for(var i=0;i<data.length;i++){
var temp = [];
for(var j=0;j<titleForKey.length;j++){
temp.push(data[i][titleForKey[j]]);
}
str.push(temp.join(",")+"\n");
}
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str.join(""));
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "export.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
window.onload = function(){
document.getElementById("test").onclick = function(){
exportCsv({
title:["第一列","第二列"],
titleForKey:["num1","num2"],
data:[
{
num1:"123",
num2:"fff"
},{
num1:"123",
num2:"fff"
},{
num1:"123",
num2:"fff"
}]
});
}
}
</script>
</head>
<body>
<a id="test" href="javascript:;">导出</a>
</body>
</html>
第二种方法通过ActiveXObject("Excel.Application")实现，这种方法只支持ie浏览器
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE导出CSV</title>
<script>
window.onload = function(){
function exportCsv(){
//创建AX对象excel
var oXL = new ActiveXObject("Excel.Application");
//获取workbook对象
var oWB = oXL.Workbooks.Add();
//激活当前sheet
var oSheet = oWB.ActiveSheet;
var Lenr = [["标题一","标题二","标题三"],["4","5","6"],["1","2","3"]];
for (i = 0; i < Lenr.length; i++) {
for (j = 0; j < Lenr[i].length; j++) {
oSheet.Cells(i + 1, j + 1).value = Lenr[i][j];
}
}
//设置excel可见属性
oXL.Visible = true;
}
document.getElementById("J_export").onclick = function(){
exportCsv();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">导出</a>
</body>
</html>
第三种方法也是目前项目中正在使用的
通过使用FileSave.js实现FileSave.js插件https://github.com/eligrey/FileSaver.js/
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE导出CSV</title>
<script src="FileSaver.js"></script>
<script>
window.onload = function(){
function exportCsv2(){
//Excel打开后中文乱码添加如下字符串解决
var exportContent = "\uFEFF";
var blob = new Blob([exportContent+"标题,标题,标题\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.csv");
}
document.getElementById("J_export").onclick = function(){
exportCsv2();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">导出</a>
</body>
</html>
网页前端导出CSV，Excel格式文件的更多相关文章
- 将Mysql的一张表导出至Excel格式文件
将Mysql的一张表导出至Excel格式文件 导出语句 进入mysql数据库,输入如下sql语句: select id, name, age from tablename into outfile ' ...
- 将table导出为excel格式文件
html: <table cellpadding="0" cellspacing="0" class="data_table" id= ...
- Powerdesigner 导出Excel格式数据字典 导出Excel格式文件
版权声明:本文为博主原创文章,转载请注明出处; 网上我也看到了很多的Powerdesigner 导出方法,因为Powerdesigner 提供了部分VBA功能,所以让我用代码导出Excel格式文件得以 ...
- 使用PHPExcel导入导出excel格式文件
使用PHPExcel导入导出excel格式文件 作者:zccst 因为导出使用较多,以下是导出实现过程. 第一步,将PHPExcel的源码拷贝到项目的lib下 文件包含:PHPExcel.ph ...
- 将ACCESS 的数据库中的表的文件 导出了EXCEL格式
将ACCESS 的数据库中的表的文件 导出了EXCEL格式 '''' '将ACCESS数据库中的某个表的信息 导出为EXCEL 文件格式 'srcfName ACCESS 数据库文件路径 'desfN ...
- 前端导出csv
前端导出csv export: function(data, name) { // csv文件的BOM头 \ufeff可以让excel等识别出csv文件的编码 var uri = 'data:text ...
- SPOOL 命令使用实例【oracle导出纯文本格式文件】
SPOOL 命令使用实例[oracle导出纯文本格式文件] SET echo off --在用start命令执行一个sql脚本时,是否显示脚本中正在执行的SQL语句: SET ...
- java导入导出下载Excel,xls文件(带下拉框)
/** * 导入excel文件 * 2014-7-23 * @return */ @RequiresPermissions("plug:product:caiwu:upload") ...
- python读取与写入csv,txt格式文件
python读取与写入csv,txt格式文件 在数据分析中经常需要从csv格式的文件中存取数据以及将数据写书到csv文件中.将csv文件中的数据直接读取为dict类型和DataFrame是非常方便也很 ...
随机推荐
- 剑指offer-面试题44-数字序列中某一位的数字-脑筋急转弯
/* 题目: 数字以0123456789101112131415…的格式序列化到一个字符序列中. 在这个序列中,第5位(从0开始计数,即从第0位开始)是5,第13位是1,第19位是4,等等. 请写一个 ...
- Vue中vue-i18n结合vant-ui实现国际化
(一)添加依赖模块 在package.json文件中添加vant模块的依赖,如: // package.json { "dependencies": { "vant&qu ...
- 论Flaks与Django的区别
1. jiaji2和DjangoTemplates模板引擎相比,jiaja2语法更简单 2. 耦合 3. 模型 3.1 模型定义 3.2 模型数据查询 Django: 自带ORM(Object-Rel ...
- pycharm导入python包
总步骤:file --> settings --> poject interpreter --> 点击加号 --> 搜索需要导入的python包 --> 选中需要导入的p ...
- Java8新特性一览表
总览 forEach() method in Iterable interface(Iterable接口中的forEach()方法) default and static methods in Int ...
- linux基础之磁盘管理与文件系统
上面一篇文章(https://www.cnblogs.com/ckh2014/p/7224851.html)介绍了硬盘的基本结构,那么一块磁盘如何应用取存储数据呢? 它的步骤是这样的: 识别硬盘 -- ...
- Ubuntu WiFi连接问题
1,先说明下, 这种方式仅针对 RTL8723BE这款无限网卡. 先用 lspci|grep -i net 先用这个命令查询网卡型号, 我的电脑查询结果: 00:19.0 Ethernet contr ...
- C语言实现链式二叉树静态创建，（先序遍历），（中序遍历），（后续遍历）
#include <stdio.h>#include <stdlib.h> struct BTNode{ char data ; struct BTNode * pLchild ...
- First Kernel-pwn
Kernel pwn-极简题目的操作模式 完全参照M4x师傅的指导,用 hacklu的baby kernel迈了第一步 题目附带文件说明 一般题目会给出bzImage,.cpio, .sh文件 sh文 ...
- Query的选择器
Query的选择器 一. 基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象. ...