简体   繁体   English

在angular2中导出xlsx文件(打字稿)

[英]Exporting xlsx files in angular2 (typescript)

I need to get data to export to an xlsx file from an angular2 application that is in development. 我需要获取数据以从正在开发的angular2应用程序导出到xlsx文件。

Maybe I am really just looking for help getting a couple of libraries to load. 也许我真的只是在寻求帮助来加载几个库。 A couple of things I've found are this jsfiddle and this stackoverflow . 我发现的一些东西是这个jsfiddle和这个stackoverflow I'd like to get something like this working, in angular2. 我想在angular2中获得类似的工作。 Any attempts to get alasql to work have been met with errors stating it's not a module and such. 任何使alasql正常运行的尝试都遇到了错误,指出它不是模块等。 Trying to follow approaches listed on various blogs, such as this one result in errors like "cannot read property 'compile' of undefined" 尝试遵循各种博客中列出的方法,例如这种方法会导致错误,例如“无法读取未定义的属性'compile'”

In the previously mentioned jsfiddle is an example of what I'd like to get working: 在前面提到的jsfiddle中,是我想开始工作的一个示例:

var res = alasql('SELECT INTO XLSX("MyAwesomeData.xlsx",?) FROM ?',[opts,[data1,data2]]);

I'm open to other tools, but the above would work for me -- if I could get it to work with angular2. 我可以使用其他工具,但是上面的方法对我适用-如果我可以使其与angular2一起使用。

To export json to excal file in angular 2, you can make use of alasql npm module. 要将json导出到angular 2的exal文件中,可以使用alasql npm模块。

  1. Install npm modules 安装npm模块

     i) npm install --save alasql ii) npm install --save xlsx 
  2. In angular-cli.json, under scripts add the following node module scripts 在angular-cli.json中的脚本下添加以下节点模块脚本

     "scripts": [ "../node_modules/xlsx/dist/xlsx.core.min.js", "../node_modules/xlsx/dist/xlsx.min.js", "../node_modules/alasql/dist/alasql.min.js" 

    ] ]

  3. In the component where you need to export the file add the below import statement: 在需要导出文件的组件中,添加以下导入语句:
    import * as alasql from 'alasql';

  4. On button click function add the following code:- 在按钮单击功能上添加以下代码:

     buttonClick(){ var data1 = [{a:1,b:10},{a:2,b:20}]; var mystyle = { headers:true, column: {style:{Font:{Bold:"1"}}}, rows: {1:{style:{Font:{Color:"#FF0077"}}}}, cells: {1:{1:{ style: {Font:{Color:"#00FFFF"}} }}} }; alasql('SELECT * INTO XLSXML("tdts.xls",?) FROM ?',[mystyle,data1]); 

    } }

Recently, I have faced the same problem. 最近,我遇到了同样的问题。 Simple alasql is not angular 2 module but still you could use it with angular 2. simple include it like in the old way. 简单的alasql不是angular 2模块,但是您仍然可以将其与angular 2一起使用。简单地像以前那样包含它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

then add this line after the imports in the component or the service file wher you need to use alasql. 然后在需要使用alasql的组件或服务文件中的导入之后添加此行。

declare let alasql

that works perfectly for me here is the link 最适合我的地方是链接

good luck 祝好运

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM