typescript Angular 导出 Excel 客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44110009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular export Excel client side
提问by Gianluca Paris
I'm using Angular v4, i guess how can I build an Excel spreadsheet starting from an object in a component. I need to download the Excel file on the click of a button and I have to do this client side. I have a json file composed of arrays and I need to transfer this on an excel file, possibly customizable in style. Is it possible? If yes, how?
我正在使用 Angular v4，我想如何从组件中的对象开始构建 Excel 电子表格。我需要点击一个按钮来下载 Excel 文件，我必须做这个客户端。我有一个由数组组成的 json 文件，我需要将它传输到一个 excel 文件中，可能在样式上可自定义。是否可以？如果是，如何？
Edit: No js libraries please, need to do this with Typescript and Angular
编辑：请不要使用 js 库，需要使用 Typescript 和 Angular 执行此操作
回答by paruvelly Vishwanath
yourdata= jsonData
你的数据= jsonData
ConvertToCSV(objArray) {
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
var row = "";
for (var index in objArray[0]) {
//Now convert each value to string and comma-separated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
str += row + '\r\n';
for (var i = 0; i < array.length; i++) {
var line = '';
for (var index in array[i]) {
if (line != '') line += ','
line += array[i][index];
}
str += line + '\r\n';
}
return str;
}
in your html:
在你的 html 中：
<button (click)="download()">export to excel</button>
in component:
在组件中：
download(){
var csvData = this.ConvertToCSV(yourdata);
var a = document.createElement("a");
a.setAttribute('style', 'display:none;');
document.body.appendChild(a);
var blob = new Blob([csvData], { type: 'text/csv' });
var url= window.URL.createObjectURL(blob);
a.href = url;
a.download = 'User_Results.csv';/* your file name*/
a.click();
return 'success';
}
Hope you it will help you
希望你能帮到你
回答by John Peters
You may not like this answer based on your requirements; however, without a JS library you are re-inventing the wheel. I've personally found Excel XML formats to be mind boggling, with the library below, (callable from within Angular), you can benefit from the work already done on that front.
根据您的要求，您可能不喜欢这个答案；但是，如果没有 JS 库，您就是在重新发明轮子。我个人发现 Excel XML 格式令人难以置信，使用下面的库（可从 Angular 中调用），您可以从在这方面已经完成的工作中受益。
There are two parts to your design, the download and the opening/editing of the content, neither are Angular related as Angular is just the container to do the work.
您的设计有两个部分，下载和内容的打开/编辑，两者都与 Angular 无关，因为 Angular 只是完成工作的容器。
- Search for how to download files within Angular
- Once the download has happened, and the file is now "local" open it up using something like this
- 搜索如何在 Angular 中下载文件
- 下载完成后，文件现在是“本地的”，使用类似的方法打开它
回答by Ludwig
I think you will not get that done without js libraries in the background. What you need are the typings for utilizing it in your Angular project with typescript.
我认为如果没有后台的 js 库，您将无法完成这项工作。您需要的是在带有打字稿的 Angular 项目中使用它的类型。
For creating an excel file you could use something like exceljs. To use it in your project also install the typings you can find here. I am not sure if this library fits... haven't used it before.
要创建 excel 文件，您可以使用诸如exceljs 之类的东西。要在您的项目中使用它，还需要安装您可以在此处找到的类型。我不确定这个库是否适合......以前没有使用过它。
For downloading you should use FileSaver.js(I have already used it).
对于下载，您应该使用FileSaver.js（我已经使用过它）。
npm install file-saver --save
... and the typings:
...和打字：
npm install @types/file-saver --save-dev
For using FileSaver.js put the following import to your component:
要使用 FileSaver.js，请将以下导入放入您的组件中：
import * as FileSaver from 'file-saver';
To trigger the download use that:
要触发下载使用：
FileSaver.saveAs(fileData, "filename.xlsx")
'fileData' has to be a Blob.
'fileData' 必须是一个 Blob。
Hope this helps a little.
希望这有所帮助。
回答by user3588429
Vishwanath answer was working for me when i replaced "," with ";". In Typescript the implementation could look like this:
当我用“;”替换“，”时，Vishwanath的答案对我有用。在 Typescript 中，实现可能如下所示：
ConvertToCSV(objArray: any) {
const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
let str = '';
let row = '';
for (const index of Object.keys(objArray[0])) {
row += `${index};`;
}
row = row.slice(0, -1);
str += `${row}\r\n`;
for (let i = 0; i < array.length; i++) {
let line = '';
for (const index of Object.keys(array[i])) {
if (line !== '') {
line += ';';
}
line += array[i][index];
}
str += `${line}\r\n`;
}
return str;
}
I hope this helps someone.
我希望这可以帮助别人。
回答by Adriano Moreira
it not is possible.
这是不可能的。
XLS is a binary format.
XLS 是一种二进制格式。
The project Apache POI(https://en.wikipedia.org/wiki/Apache_POI) name class as HSSF (Horrible SpreadSheet Format).
项目 Apache POI( https://en.wikipedia.org/wiki/Apache_POI) 将类命名为 HSSF (Horrible SpreadSheet Format)。
my recommendation, make it in server side.
我的建议，在服务器端进行。
