Wijmo导出Excel失败

问题：
1. 子系统使用wijmo导出excel时，页面报错，具体报错如下：


2. 当在子系统中单独引入jszip: 3版本后，子系统本地开发环境正常，测试环境报错，具体报错如下：



子系统导出Excel定义代码如下，2个问题导出方法均未改变

import * as gridXlsx from '@grapecity/wijmo.grid.xlsx'

downloadExcel(filename: string) {
  const book = gridXlsx.FlexGridXlsxConverter.saveAsync(this.pivotGrid, {
    includeColumnHeaders: true,
    includeRowHeaders: true
  })
  book.saveAsync(`${filename}.xlsx`)
}



背景：
1. 子系统使用wijmo开发，并嵌入到microApp基座中，子系统并没有单独引入jszip，基座加载jszip代码如下
- 基座拷贝一份jszip代码放在基座中
- 通过<script src="/jszip.min.js"></script>加载到HTML模板中- 基座在package.json中安装"jszip": "^3.10.1"


- 基座通过vite拆包 optimizeDeps: { exclude: ['@grapecity/wijmo.xlsx', 'jszip'] }- 基座设置jszip

import * as wXlsx from '@grapecity/wijmo.xlsx'

wXlsx.useJSZip(window.JSZip)
window.wXlsx = wXlsx

- 基座设置jszip2. 子系统中各wijmo版本如下

    "@grapecity/wijmo": "~6.20880.670",
    "@grapecity/wijmo.all": "^6.20880.673",
    "@grapecity/wijmo.grid": "~6.20880.673",
    "@grapecity/wijmo.grid.xlsx": "~6.20880.673",
    "@grapecity/wijmo.olap": "~6.20880.673",
    "@grapecity/wijmo.react.input": "~6.20880.670",
    "@grapecity/wijmo.react.olap": "~6.20880.673",
    "@grapecity/wijmo.styles": "~6.20880.670",
    "@grapecity/wijmo.xlsx": "~6.20880.670",

请帮忙分析问题原因，并给出解决方案，非常感谢

请看我上一个回复，让你提供的完整的demo项目的原因是，我们没有办法完全还原你说的这些环境，只有代码是没有用的，从你的描述里，是把在线demo中的代码放到你的项目中才会报错
你需要提供一个可以编译运行的demo项目来复现所说的问题，否则我们无法调查原因

而且你引用的"6.20880.673"是哪个版本，这个版本是完全没有的。

子项目没有单独引入JSZIP，但是基座有引入并处理，处理方式见1楼背景描述，项目中加载过程如下：

使用上面链接中的官方demo就会报错，报错信息，项目背景，可以看之前描述：

具体代码为：

1. import '@grapecity/wijmo.styles/wijmo.css'
   
2. import * as React from 'react'
   
3. import '@grapecity/wijmo.touch' // support drag/drop on touch devices
   
4. import * as olap from '@grapecity/wijmo.olap'
   
5. import * as gridXlsx from '@grapecity/wijmo.grid.xlsx'
   
6. import * as Olap from '@grapecity/wijmo.react.olap'
   
7. 
   
8. import { getData } from './data'
   
9. 
   
10. class WijmoExcelDemo extends React.Component {
    
11.   constructor(props) {
    
12.     super(props)
    
13.     this.state = {
    
14.       ng: new olap.PivotEngine({
    
15.         itemsSource: getData(1000),
    
16.         valueFields: ['Amount'],
    
17.         rowFields: ['Buyer', 'Type'],
    
18.         showRowTotals: 'Subtotals',
    
19.         showColumnTotals: 'Subtotals'
    
20.       })
    
21.     }
    
22.   }
    
23. 
    
24.   render() {
    
25.     return (
    
26.       <div className='container-fluid'>
    
27.         <div className='row'>
    
28.           <div className='col-sm-5'>
    
29.             <Olap.PivotPanel itemsSource={this.state.ng}></Olap.PivotPanel>
    
30.           </div>
    
31.           <div className='col-sm-7'>
    
32.             <Olap.PivotGrid
    
33.               itemsSource={this.state.ng}
    
34.               initialized={this._initializePivotGrid.bind(this)}
    
35.             ></Olap.PivotGrid>
    
36.           </div>
    
37.         </div>
    
38. 
    
39.         <p>
    
40.           <button id='xlsx' className='btn btn-primary' onClick={() => this._exportGrid('xlsx')}>
    
41.             Export grid to XLSX
    
42.           </button>
    
43.         </p>
    
44.       </div>
    
45.     )
    
46.   }
    
47. 
    
48.   _initializePivotGrid(sender) {
    
49.     this._pivotGrid = sender
    
50.   }
    
51. 
    
52.   _exportGrid(docType) {
    
53.     if (docType === 'xlsx') {
    
54.       // create book with current view
    
55.       const book = gridXlsx.FlexGridXlsxConverter.saveAsync(this._pivotGrid, {
    
56.         includeColumnHeaders: true,
    
57.         includeRowHeaders: true
    
58.       })
    
59.       book.sheets[0].name = 'PivotGrid'
    
60.       // save the book
    
61.       book.saveAsync('PivotGrid.xlsx')
    
62.     }
    
63.   }
    
64. }
    
65. 
    
66. export default WijmoExcelDemo
    

复制代码

1. "@grapecity/wijmo": "~6.20880.670",
   
2.     "@grapecity/wijmo.all": "^6.20880.673",
   
3.     "@grapecity/wijmo.grid": "~6.20880.673",
   
4.     "@grapecity/wijmo.grid.xlsx": "~6.20880.673",
   
5.     "@grapecity/wijmo.olap": "~6.20880.673",
   
6.     "@grapecity/wijmo.react.input": "~6.20880.670",
   
7.     "@grapecity/wijmo.react.olap": "~6.20880.673",
   
8.     "@grapecity/wijmo.styles": "~6.20880.670",
   
9.     "@grapecity/wijmo.touch": "~5.20242.30",
   
10.     "@grapecity/wijmo.xlsx": "~6.20880.670",

复制代码

webpack版本为5

1.    "webpack": "~5.73.0",
   
2.     "webpack-bundle-analyzer": "~4.5.0",
   
3.     "webpack-dev-server": "~4.9.3",
   
4.     "webpack-merge": "~5.3.0",
   
5.     "webpackbar": "~5.0.2",

复制代码

你是用提到的
https://demo.grapecity.com.cn/wi ... otGrid/Export/Excel,PDF,CSV/purejs
这个demo下载后，在没有做过修改的情况下编译后就能复现报错的吗？

如果不是的话，还是请提供一个demo项目，从你的描述来看和引用的版本，依赖，以及webpack的版本，配置等等都有可能有关系。

使用的就是官方提供的标注导出方法，即官方导出Excel文档：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import '@grapecity/wijmo.touch'; // support drag/drop on touch devices
   
5. import * as wjOlap from '@grapecity/wijmo.olap';
   
6. import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx';
   
7. import * as wjGridPdf from '@grapecity/wijmo.grid.pdf';
   
8. import * as wjPdf from '@grapecity/wijmo.pdf';
   
9. import { CellRange } from '@grapecity/wijmo.grid';
   
10. import { saveFile } from '@grapecity/wijmo';
    
11. import { getData } from './data';
    
12. document.readyState === 'complete' ? init() : window.onload = init;
    
13. function init() {
    
14.     // initialize pivot engine
    
15.     let ng = new wjOlap.PivotEngine({
    
16.         itemsSource: getData(1000),
    
17.         valueFields: ['Amount'],
    
18.         rowFields: ['Buyer', 'Type'],
    
19.         showRowTotals: 'Subtotals',
    
20.         showColumnTotals: 'Subtotals',
    
21.     });
    
22.     let amountField = ng.fields.getField('Amount');
    
23.     amountField.format = 'c0';
    
24.     let dateField = ng.fields.getField('Date');
    
25.     dateField.format = 'yyyy'; // show dates as years
    
26.     // show pivot panel
    
27.     let pivotPanel = new wjOlap.PivotPanel('#pivotPanel', {
    
28.         itemsSource: ng
    
29.     });
    
30.     // show pivot grid
    
31.     let pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
    
32.         itemsSource: ng
    
33.     });
    
34.     // export the grid to CSV
    
35.     // NOTE: does not require any additional modules
    
36.     document.getElementById('csv').addEventListener('click', () => {
    
37.         let rng = new CellRange(0, 0, pivotGrid.rows.length - 1, pivotGrid.columns.length - 1), csv = pivotGrid.getClipString(rng, true, true, true); // save CSV with column and row headers
    
38.         saveFile(csv, 'PivotGrid.csv');
    
39.     });
    
40.     // export the grid to XLSX
    
41.     // NOTE: requires jszip, wijmo.xlsx, and wijmo.grid.xlsx
    
42.     document.getElementById('xlsx').addEventListener('click', () => {
    
43.         // create book with current view
    
44.         let book = wjGridXlsx.FlexGridXlsxConverter.saveAsync(pivotGrid, {
    
45.             includeColumnHeaders: true,
    
46.             includeRowHeaders: true
    
47.         });
    
48.         // save the book
    
49.         book.saveAsync('PivotGrid.xlsx');
    
50.     });
    
51.     // export grid to PDF
    
52.     // NOTE: requires wijmo.pdf and wijmo.grid.pdf
    
53.     document.getElementById('pdf').addEventListener('click', () => {
    
54.         wjGridPdf.FlexGridPdfConverter.export(pivotGrid, 'PivotGrid.pdf', {
    
55.             maxPages: 10,
    
56.             scaleMode: wjGridPdf.ScaleMode.PageWidth,
    
57.             documentOptions: {
    
58.                 compress: true,
    
59.                 header: { declarative: { text: '\t&[Page] of &[Pages]' } },
    
60.                 footer: { declarative: { text: '\t&[Page] of &[Pages]' } },
    
61.                 info: { author: 'MESCIUS', title: 'PivotGrid' }
    
62.             },
    
63.             styles: {
    
64.                 cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6' },
    
65.                 altCellStyle: { backgroundColor: '#f9f9f9' },
    
66.                 groupCellStyle: { backgroundColor: '#dddddd' },
    
67.                 headerCellStyle: { backgroundColor: '#eaeaea' }
    
68.             }
    
69.         });
    
70.     });
    
71.     // create a PDF document with the PivotGrid and some other content
    
72.     // NOTE: requires wijmo.pdf and wijmo.grid.pdf
    
73.     document.getElementById('pdfdoc').addEventListener('click', () => {
    
74.         // create the document
    
75.         let doc = new wjPdf.PdfDocument({
    
76.             compress: true,
    
77.             header: { declarative: { text: '\t&[Page]\\&[Pages]' } },
    
78.             ended: (sender, args) => {
    
79.                 wjPdf.saveBlob(args.blob, 'PivotGridDoc.pdf');
    
80.             }
    
81.         });
    
82.         // add some content
    
83.         doc.drawText('This is a PivotGrid control:');
    
84.         // add the grid (400pt wide)
    
85.         wjGridPdf.FlexGridPdfConverter.draw(pivotGrid, doc, 400);
    
86.         // finish document
    
87.         doc.end();
    
88.     });
    
89. }
    
90. 
    
91. // https://demo.grapecity.com.cn/wijmo/demos/OLAP/PivotGrid/Export/Excel,PDF,CSV/purejs

复制代码

测试环境：webpack编译后的生产环境，本地环境：未编译前的本地开发环境

“当在子系统中单独引入jszip: 3版本后，子系统本地开发环境正常，测试环境报错”

请给一个能复现问题的demo项目。你提到的测试环境如何复现？是否是项目编译后部署就会报错？