原文: http://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/

-----------------------------------------------------

Use JavaScript to Export Your Data as CSV

28 MAY 2015 on Javascriptcsvexportdata

101155

Do you know what annoys me? When I have my data in a web application and I can't get it out. And if you're not giving your users a way to export their data, then they're annoyed too.

Today I'm going to show you how simple it is to provide CSV downloads in your application.

All that's needed is a little Javascript and HTML. You don't need a fancy $2,000 control suite or any server-side code.

First, we need some data. For this example we will turn an array of objects into a CSV download for the user:

var stockData = [
{
Symbol: "AAPL",
Company: "Apple Inc.",
Price: 132.54
},
{
Symbol: "INTC",
Company: "Intel Corporation",
Price: 33.45
},
{
Symbol: "GOOG",
Company: "Google Inc",
Price: 554.52
},
];

Now we need a function that will take any array of objects and create CSV data:

function convertArrayOfObjectsToCSV(args) {
var result, ctr, keys, columnDelimiter, lineDelimiter, data; data = args.data || null;
if (data == null || !data.length) {
return null;
} columnDelimiter = args.columnDelimiter || ',';
lineDelimiter = args.lineDelimiter || '\n'; keys = Object.keys(data[0]); result = '';
result += keys.join(columnDelimiter);
result += lineDelimiter; data.forEach(function(item) {
ctr = 0;
keys.forEach(function(key) {
if (ctr > 0) result += columnDelimiter; result += item[key];
ctr++;
});
result += lineDelimiter;
}); return result;
}

First the function loops through the keys on one of the objects to create a header row, followed by a newline. Then we loop through each object and write out the values of each property.

Here's what you end up with:

Symbol,Company,Price
AAPL,Apple Inc.,132.54
INTC,Intel Corporation,33.45
GOOG,Google Inc,554.52

Now we need a function that will take this data and turn it into a CSV file for download:

function downloadCSV(args) {
var data, filename, link;
var csv = convertArrayOfObjectsToCSV({
data: stockData
});
if (csv == null) return; filename = args.filename || 'export.csv'; if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv); link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
link.click();
}

This function takes the CSV we created and prepends a special string that tells the browser that our content is CSV and it needs to be downloaded:

data:text/csv;charset=utf-8,

So now we have:

data:text/csv;charset=utf-8,Symbol,Company,Price
AAPL,Apple Inc.,132.54
INTC,Intel Corporation,33.45
GOOG,Google Inc,554.52

We set the href attribute on our link to the above string. We also set the download attribute on our link to the filename we want to see for our download stock-data.csv

Then in our html we have a simple link that we can use to kick off things and test it out:

    <a href='#'
onclick='downloadCSV({ filename: "stock-data.csv" });'
>Download CSV</a>

And when you click this link here's what should happen:

You should get a download in the browser called stock-data.csv and then when you open it, we see the data in the expected table format.

The meat of this example happens in less than 50 lines of code. The code loops through your objects generically, so it doesn't matter what properties are on your objects. If each object had 100 or 3 properties it would work just as well.

It's also a nifty trick that you can create a download so easily in the browser. Not all developers know that you can do that. In fact, that same special string can be modified to allow other types of downloads.

Here's the full example if you want to play with it:

<!doctype html>
<html>
<head></head>
<body> <a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a> <script type="text/javascript">
var stockData = [
{
Symbol: "AAPL",
Company: "Apple Inc.",
Price: "132.54"
},
{
Symbol: "INTC",
Company: "Intel Corporation",
Price: "33.45"
},
{
Symbol: "GOOG",
Company: "Google Inc",
Price: "554.52"
},
]; function convertArrayOfObjectsToCSV(args) {
var result, ctr, keys, columnDelimiter, lineDelimiter, data; data = args.data || null;
if (data == null || !data.length) {
return null;
} columnDelimiter = args.columnDelimiter || ',';
lineDelimiter = args.lineDelimiter || '\n'; keys = Object.keys(data[0]); result = '';
result += keys.join(columnDelimiter);
result += lineDelimiter; data.forEach(function(item) {
ctr = 0;
keys.forEach(function(key) {
if (ctr > 0) result += columnDelimiter; result += item[key];
ctr++;
});
result += lineDelimiter;
}); return result;
} function downloadCSV(args) {
var data, filename, link; var csv = convertArrayOfObjectsToCSV({
data: stockData
});
if (csv == null) return; filename = args.filename || 'export.csv'; if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv); link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
link.click();
}
</script>
</body>
</html>

Use JavaScript to Export Your Data as CSV的更多相关文章

  1. Use a PowerShell Module to Easily Export Excel Data to CSV

    http://blogs.technet.com/b/heyscriptingguy/archive/2011/07/21/use-a-powershell-module-to-easily-expo ...

  2. HTML save data to CSV or excel

    /********************************************************************************* * HTML save data ...

  3. 利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码

    利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码 2014-07-31 12:53 1047人阅读 评论(0) 收藏  ...

  4. [Javascript] Simplify Creating Immutable Data Trees With Immer

    Immer is a tiny library that makes it possible to work with immutable data in JavaScript in a much m ...

  5. [Python] Read and plot data from csv file

    Install: pip install pandas pip install matplotlib # check out the doc from site import pandas as pd ...

  6. asp and javascript: sql server export data to csv and to xls

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <% //塗聚文 //20131021 functio ...

  7. Export SQLite data to Excel in iOS programmatically(OC)

    //For the app I have that did this, the SQLite data was fairly large. Therefore, I used a background ...

  8. JavaScript 的 export default 命令

    export default 指定模块的默认输出,一个模块只能有一个默认输出. 举个例子. export-default.js export default { name: 'hello', data ...

  9. [WIP]JavaScript import, export

    创建: 2019/06/14 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import h ...

随机推荐

  1. 在.vue文件中让html代码自动补全的方法(支持vscode)

    在.vue文件中让html代码自动补全的方法(支持vscode) https://blog.csdn.net/qq_36529459/article/details/79196763 "fi ...

  2. Zend studio 修改编码格式

    一.临时修改编码格式 edit -> Set Encoding... -> Other(选择) 二.修改软件默认编码格式

  3. CPP-基础:文字常量区

    内存不可写 char* 先看一个例子 ///////////// //代码1 #include <string> main() { char *buf = "good morni ...

  4. NET实现谷歌OCR的使用记录(CLOUD VISION API)

    1)购买VPS 2)配置一VPN 建议使用 cisco anycounect  |   ***会连接失败(切记,祭奠浪费的一天)大神可以帮我看下是什么问题 3)进入https://cloud.goog ...

  5. IFE春季班第一阶段任务(请仔细阅读)

    第一阶段的主要目标是帮助大家 了解.认识.学习.掌握HTML及CSS.第一阶段任务从 3月14日 开始,持续到 4月3日.当然,您也可以在这个时间以后继续自行实践练习. 第一阶段任务一共有 12 个题 ...

  6. bzoj 1051 受欢迎的牛-tarjan

    https://www.lydsy.com/JudgeOnline/problem.php?id=1051 如果A喜欢B,那么A->B连边,那么整个图储存下来,如果有好多个牛是受欢迎的,那么他们 ...

  7. (7) openssl dgst(生成和验证数字签名)

    该伪命令是单向加密工具,用于生成文件的摘要信息                  也可以进行数字签名,及验证数字签名. 首先要明白的是,数字签名的过程是计算出摘要信息,然后使用私钥对摘要信息进行加密得 ...

  8. CSS--浮动与定位

    *浮动布局能够实现横向多列布局. 1.在网页中,元素有三种布局模型: 1.流动模型(Flow) 2.浮动模型 (Float) 3.层模型(Layer) 流动(Flow)是默认的网页布局模式.流动布局模 ...

  9. 条款3:尽可能使用const(use const whenever possible)

    1.只要这(某值保持不变)是事实,就应该确实说出来,这样可以获得编译器的协助,确保这条约束不被违反. 2.keyword const 有很多种用法,但都简单易用. 2.1classes 外部修饰glo ...

  10. java.sql.SQLException: Data truncated for column 'lastSeason' at row 1

    在使用项目将数据存储到 datetime 的字段 ,抛出了这个异常 而我是使用Java.util.Date 存储过去的 解决代码如下: Date date = new Date(); demo.set ...