JS 本地导出 CSV 文件
最编程
2024-03-01 18:41:55
...
什么时候需要用到此功能
当项目需要导出简易表格文件,又不希望引入臃肿的表格导出组件时,可以使用JS原生导出CSV类表格文件,也可以使用excel和wps打开
直接上代码
通过二维数组导出数据
export_csv: function(list, name) {
const newList = list.map(res => res.join(','))
const data = newList.join(',\n')
// “\ufeff” BOM头
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = (name+".csv")||"temp.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
},
export_csv([['123', '456', '789'], ['987', '654', '321']], 'test')
通过字符串导出数据
export_csv: function(data, name) {
// “\ufeff” BOM头
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = (name+".csv")||"temp.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
},
export_csv('123,456,789,\n987,654,321', 'test')
效果如下,文件名为test.csv
通过dom table导出数据
export_table: function(selector, name) {
var self = this;
if (document.querySelectorAll(selector).length == 0) {
alert('Selector "'+selector+'" not exists!');
return false;
}
self.export_csv(self.get_table_data(selector), name);
},
export_table('.excel', '收支明细_')
导出class为.excel
的表格数据
获取dom table表格数据
get_table_data: function(selector) {
var data = "";
document.querySelectorAll(selector+' tr').forEach(function(t) {
var tmp = [];
t.querySelectorAll('th,td').forEach(function(e){
tmp.push(e.innerText.replace("\n", "")); // 单元格里含有多个html元素可能会获取到换 行符
});
data += tmp.join(",") + "\n";
});
return data;
}
get_table_data('.excel')
复制
获取class为.excel
的表格数据
推荐阅读
-
将 ifix 历史数据(H04/H08/H24)转换为 CSV 文件导出-3.摘要
-
IOS UI 自动化测试实践:pyhton-wda 环境设置篇-Xcode 版本:10.1iphone 版本:12.0.1OS 版本:10.13.6 实践开始 创建一个新目录并从 git 下载 WDA 项目代码。 git clone https://github.com/facebook/WebDriverAgent 并运行初始化脚本。 ./Scripts/bootstrap.sh 出现以下错误信息:原因:Carthage 需要下载相关的依赖项,而这些依赖项并未在本地安装。 解决方法通过 brew 下载并安装依赖项: brew install carthage 下载成功并初始化脚本后,出现以下错误:原因:需要 npm 来打包响应 js 文件,而机器上未安装该文件。 解决方案:通过 brew 下载并安装 npm(注:brew 真的是个好东西):brew install npm 安装成功后,继续初始化脚本。/Scripts/bootstrap.sh Xcode 相关操作
-
node.js 使用 xml2js.Parser 读取 Freeplane.mm 文件,生成测试用例.csv 文件
-
将 CSV、txt 文件内容导入 MySQL -- 加载数据本地 Infile 命令
-
Python] DataFrame 导出到 csv\txt\xlsx 文件-2。DataFrame 导出到 csv\txt\xlsx 文件-2。
-
将 hbase 表数据导出到本地 cvs 文件
-
JS 本地导出 CSV 文件
-
在Vue 3项目中,如何将本地产的js文件整合并制作成用于播放音频的按扭?
-
javascript导出csv文件(excel)的方法示例
-
用CSV文件在Shopify上轻松导入和导出产品教程