angular 7 如何将 ngx-datatable 内容导出到 excel 表？

Question

我有一个带有 ngx-datatable 和导出 excel 的 pb。我尝试使用 fileSaver， Angular 为 7。我实现了一个导出按钮并在其上执行此操作:

var blob = new Blob([document.getElementById("exportable").innerText], {
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
  //type: "application/vnd.ms-excel;charset=utf-8"
});

然后saveAs(blob, "Report.xls");

"exportable"是 ngx-datatable 的 id :

<ngx-datatable id="exportable" #table
               class="mytable"
               [rows]="rows"
               [columns]="columns">

但我得到了一个只有一列的 xls 文件，所有内容都是这样的:

你知道如何获得像我的 ngx-datatable 这样的 excel 文件展示吗？

谢谢!

Answer 1

对此我有一个更好的实用解决方案。也适用于 ANGULAR 10+

In most of the cases, the data is coming from API.

所以，如果我们直接将数据转换为 CSV 就好了。是的，有可能...

第 1 步:npm install @ctrl/ngx-csv

第 2 步:module.ts

@NgModule({
 declarations: [
  ...
  ...
  ...
 ],
 imports: [
   ...
   CsvModule,
   ...
 ]
})

第 3 步:component.html

<a csvLink [data]="yourDataObject">CSV</a>

希望此解决方案对您有所帮助:)