如何使用 JavaScript 导出 Excel 文件?

IT技术 javascript excel
2021-01-17 01:24:56

有没有办法通过Javascript生成Excel/CSV?(它也应该是浏览器兼容的)

6个回答

github 上有一个有趣的项目,称为Excel Builder (.js) ,它提供了一种下载 Excel xlsx文件的客户端方式,并包括格式化 Excel 电子表格的选项。
https://github.com/stephenliberty/excel-builder.js

使用此库时,您可能会遇到浏览器和 Excel 兼容性问题,但在合适的条件下,它可能非常有用。

另一个具有较少 Excel 选项但较少担心 Excel 兼容性问题的 github 项目可以在这里找到:ExcellentExport.js
https://github.com/jmaister/excellentexport

如果您使用的是 AngularJS,则有ng-csv
“将数组和对象转换为可下载 CSV 文件的简单指令”。

2016 年底有一个非常好的库github.com/guyonroche/exceljs(我尝试过 Excel Builder,但在您尝试保存文件时确实存在问题)
2021-03-20 01:24:56
Excel Builder (.js) 不再维护。由于网站关闭,也没有相关文档。
2021-04-03 01:24:56
2015 年,ng-xlsxjs-xlsx 之类的库越来越多
2021-04-09 01:24:56
excelbuilderjs.com/index.html链接不再有效。
2021-04-12 01:24:56

如果您可以在服务器上生成 Excel 文件,那可能是最好的方法。使用 Excel,您可以添加格式并让输出看起来更好。已经提到了几个 Excel 选项。如果您有 PHP 后端,您可以考虑phpExcel

如果您尝试使用 javascript 在客户端上完成所有操作,我认为 Excel 不是一种选择。您可以创建一个 CSV 文件并创建一个数据 URL 以允许用户下载它。

我创建了一个 JSFiddle 来演示:http : //jsfiddle.net/5KRf6/3/

这个 javascript(假设您使用 jQuery)将从表中的输入框中取出值并构建一个 CSV 格式的字符串:

var csv = "";
$("table").find("tr").each(function () {
    var sep = "";
    $(this).find("input").each(function () {
        csv += sep + $(this).val();
        sep = ",";
    });
    csv += "\n";
});

如果您愿意,您可以将数据放入页面上的一个标签中(在我的例子中是一个 ID 为“csv”的标签):

$("#csv").text(csv);

您可以使用以下代码生成该文本的 URL:

window.URL = window.URL || window.webkiURL;
var blob = new Blob([csv]);
var blobURL = window.URL.createObjectURL(blob);

最后,这将添加一个链接来下载该数据:

$("#downloadLink").html("");
$("<a></a>").
attr("href", blobURL).
attr("download", "data.csv").
text("Download Data").
appendTo('#downloadLink');
PHPExcel 已弃用,建议您改用 PhpSpreadsheet。
2021-04-07 01:24:56

类似的答案张贴在这里

工作示例链接

var sheet_1_data = [{Col_One:1, Col_Two:11}, {Col_One:2, Col_Two:22}];
var sheet_2_data = [{Col_One:10, Col_Two:110}, {Col_One:20, Col_Two:220}];
var opts = [{sheetid:'Sheet One',header:true},{sheetid:'Sheet Two',header:false}];
var result = alasql('SELECT * INTO XLSX("sample_file.xlsx",?) FROM ?', [opts,[sheet_1_data ,sheet_2_data]]);

需要的主要库 -

<script src="http://alasql.org/console/alasql.min.js"></script> 
<script src="http://alasql.org/console/xlsx.core.min.js"></script> 
我试过这个库,但它在 chromeextension 中不安全。
2021-03-19 01:24:56
嘿哪一行是保存excel文件?因为现在我有一个数组,我想将该数组写入 excel 电子表格。
2021-03-23 01:24:56
@gumuruh 是否有您曾经检查过的特定插件/扩展程序?我找不到任何方法来检查这个插件的安全性。
2021-03-24 01:24:56
@DeniseTan,保存功能由alasql生成文件后触发。您的数据需要在对象数组中(参见我的示例)。对象键是定义列名所必需的。您可以将数组转换为对象数组。看看这个例子。
2021-03-27 01:24:56
不,我的意思是当我们在 ChromeExtension 工具中实现一些外部 javascript 时,我们需要确保没有 eval 语句,并且我们必须将所有 js 文件嵌入到我们的项目中而没有任何外部依赖......一旦您开发了 ChromeExtension 工具,您可能就知道了。好的@SujitKumarSingh,好吗?
2021-04-05 01:24:56

创建一个 AJAX 回发方法,该方法将 CSV 文件写入您的网络服务器并返回 url.. 在浏览器中将隐藏的 IFrame 设置为服务器上 CSV 文件的位置。

然后,您的用户将看到 CSV 下载链接。

虽然有点傻 - 将数据传回服务器,以便它可以直接将其提供给用户。此外,生成的 XLS 可能相当大。(也许这就是作者想在客户端生成它的原因?)也许那么生成XLS服务器端也更好?
2021-04-04 01:24:56

用一个工作示例回答你的问题:

<script type="text/javascript">
function DownloadJSON2CSV(objArray)
{
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = new Array();

        for (var index in array[i]) {
           line.push('"' + array[i][index] + '"');
        }

        str += line.join(';');
        str += '\r\n';
    }
    window.open( "data:text/csv;charset=utf-8," + encodeURIComponent(str));
}
</script>
唯一的缺点是您无法决定该文件的名称。如果他们想轻松打开它,您将不得不依靠用户将其保存为 *.csv。
2021-04-10 01:24:56