网页前端导出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是非常方便也很 ...
随机推荐
- 【终端使用】用户权限和"chmod"命令的简单使用
一.用户权限知识点 1.1.基本概念 用户是Linux系统工作中重要的一环,用户管理包括 用户管理 和 组管理. 在Linux系统中,不论由本机登录系统 或者 远程登录系统,每个系统都必须拥有一个账号 ...
- 【spring boot】SpringBoot初学（3）– application配置和profile隔离配置
前言 github: https://github.com/vergilyn/SpringBootDemo 说明:我代码的结构是用profile来区分/激活要加载的配置,从而在一个project中写各 ...
- laravel上传git如何忽略你不想提交的文件
1.在文件根目录下面有一个文件 .gitignore .gitignore文件用来忽略被指定的文件或文件夹的改动,被记录在.gitignore文件里的文件或文件夹,是无法被git跟踪到的,换句话说,被 ...
- LeetCode subarray-sum-equals-k题解 前缀和+Hash表+枚举——线性做法
文章目录 题意 思路 连续子数组的和sum[i,j] 源码 结果记录 题意 给定一个数组,求连续的子数组的和为k的子数组个数. 思路 连续子数组的和sum[i,j] sum[i,j]=∑k=ijAk( ...
- ECMAScript基本语法——⑤运算符 赋值运算符
左边的变量等于等号左边的内容移到右边
- ECMAScript基本语法——⑤运算符 算数运算符
+-*/%
- unity一些操作汇总
设置父物体高度自适应子物体:父物体添加ContentSizeFitter,设置Horizeontal Fit和Vertical Fit为Preferred Size. ScrollView设置Cone ...
- jenkins - docker搭建jenkins
jenkins镜像拉取 docker pull jenkins/jenkins 为jenkins镜像分配容器 docker run -d --name jenkins \ -p 8080:8080 \ ...
- Git分支规范说明
1.分支类型说明 分支名称 分支描述 唯一 权限管理 release 发布分支,内部分支,当确定需要发布版本时,从develop分支拉出此分支 唯一 最高权限,由版本经理或者团队核心成员组管理 mas ...
- vjudge A^B Mod C 然后，10.6最。。。的 快速幂！！！
链接:https://vjudge.net/contest/331993#problem/D 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Inpu ...