0

在网格数据中存在 html 标签，在 exportToExcel 期间，这些标签也被导出到 excel 中，是否有任何设置可以只导出纯文本？如果不是，我如何使用我们的任何 html 标签实现 exportToExcel。

这是代码，对于基本网格示例，我更新了 mockData() 以添加 html 标签。 https://ghiscoding.github.io/Angular-Slickgrid/#/basic grid-basic.component.ts

import { Component, OnInit } from '@angular/core';
import { Column, GridOption, Formatters } from 'angular-slickgrid';

const NB_ITEMS = 995;

@Component({
  templateUrl: './grid-basic.component.html'
})
export class GridBasicComponent implements OnInit {
  title = 'Example 1: Basic Grids';
  subTitle = `
    Basic Grids with fixed sizes (800 x 225) set by "gridHeight" & "gridWidth"
    <ul>
      <li><a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step" target="_blank">Wiki HOWTO link</a></li>
    </ul>
  `;

  columnDefinitions1: Column[];
    gridOptions1: GridOption;
   dataset1: any[];
 
  ngOnInit(): void {
    this.columnDefinitions1 = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, asyncPostRender: this.renderAngularComponent.bind(this) },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions1 = {
      enableAutoResize: false,
      enableSorting: true,
      enableAsyncPostRender: true,
    };

    // mock some data (different in each dataset)
    this.dataset1 = this.mockData(NB_ITEMS);
    }

  public renderAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
    // use a delay to make sure Angular ran at least a full cycle and make sure it finished rendering the Component
    console.log(cellNode);
    console.log(dataContext);
    setTimeout(() => { $(cellNode).empty().html(dataContext[colDef.name]) }, 100);    
  }
  mockData(count: number) {
    // mock a dataset
    const mockDataset = [];
    for (let i = 0; i < count; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 29));
      const randomPercent = Math.round(Math.random() * 100);
      mockDataset[i] = {
        id: i,
        title: '<div class=\"ExternalClassB2EB0294835041FA9CBBB49ABE54C535\"><div>Modify all three lines <span style=\"color&#58;#ff0000;\">file specified </span>during installation.</div> Task</div>',
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: new Date(randomYear, randomMonth + 1, randomDay),
        finish: new Date(randomYear + 1, randomMonth + 1, randomDay),
        effortDriven: (i % 5 === 0)
      };
    }

    return mockDataset;
  }
}

网格-basic.component.html

<div class="container-fluid">
  <h2>{{title}}</h2>
  <div class="subtitle" [innerHTML]="subTitle"></div>

  <h3>Grid 1</h3>
  <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions1"      [gridOptions]="gridOptions1"
    [dataset]="dataset1" gridHeight="225" gridWidth="800">
  </angular-slickgrid>
  <hr />
 </div>

4

1 回答 1

1

配置时可以设置sanitizeDataExport: true

this.gridOptions = {
  enableExcelExport: true,
  excelExportOptions: { sanitizeDataExport: true }
}

在此处查找更多详细信息

于 2021-09-24T16:48:52.280 回答