Wijmo导出Excel失败

登录

本帖最后由 user99999 于 2024-12-19 17:05 编辑

问题：
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",

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

Richard.Ma · Richard.Ma

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

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

user99999 · user99999

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

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import '@grapecity/wijmo.touch'; // support drag/drop on touch devices
import * as wjOlap from '@grapecity/wijmo.olap';
import * as wjGridXlsx from '@grapecity/wijmo.grid.xlsx';
import * as wjGridPdf from '@grapecity/wijmo.grid.pdf';
import * as wjPdf from '@grapecity/wijmo.pdf';
import { CellRange } from '@grapecity/wijmo.grid';
import { saveFile } from '@grapecity/wijmo';
import { getData } from './data';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// initialize pivot engine
let ng = new wjOlap.PivotEngine({
itemsSource: getData(1000),
valueFields: ['Amount'],
rowFields: ['Buyer', 'Type'],
showRowTotals: 'Subtotals',
showColumnTotals: 'Subtotals',
});
let amountField = ng.fields.getField('Amount');
amountField.format = 'c0';
let dateField = ng.fields.getField('Date');
dateField.format = 'yyyy'; // show dates as years
// show pivot panel
let pivotPanel = new wjOlap.PivotPanel('#pivotPanel', {
itemsSource: ng
});
// show pivot grid
let pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
itemsSource: ng
});
// export the grid to CSV
// NOTE: does not require any additional modules
document.getElementById('csv').addEventListener('click', () => {
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
saveFile(csv, 'PivotGrid.csv');
});
// export the grid to XLSX
// NOTE: requires jszip, wijmo.xlsx, and wijmo.grid.xlsx
document.getElementById('xlsx').addEventListener('click', () => {
// create book with current view
let book = wjGridXlsx.FlexGridXlsxConverter.saveAsync(pivotGrid, {
includeColumnHeaders: true,
includeRowHeaders: true
});
// save the book
book.saveAsync('PivotGrid.xlsx');
});
// export grid to PDF
// NOTE: requires wijmo.pdf and wijmo.grid.pdf
document.getElementById('pdf').addEventListener('click', () => {
wjGridPdf.FlexGridPdfConverter.export(pivotGrid, 'PivotGrid.pdf', {
maxPages: 10,
scaleMode: wjGridPdf.ScaleMode.PageWidth,
documentOptions: {
compress: true,
header: { declarative: { text: '\t&[Page] of &[Pages]' } },
footer: { declarative: { text: '\t&[Page] of &[Pages]' } },
info: { author: 'MESCIUS', title: 'PivotGrid' }
},
styles: {
cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6' },
altCellStyle: { backgroundColor: '#f9f9f9' },
groupCellStyle: { backgroundColor: '#dddddd' },
headerCellStyle: { backgroundColor: '#eaeaea' }
}
});
});
// create a PDF document with the PivotGrid and some other content
// NOTE: requires wijmo.pdf and wijmo.grid.pdf
document.getElementById('pdfdoc').addEventListener('click', () => {
// create the document
let doc = new wjPdf.PdfDocument({
compress: true,
header: { declarative: { text: '\t&[Page]\\&[Pages]' } },
ended: (sender, args) => {
wjPdf.saveBlob(args.blob, 'PivotGridDoc.pdf');
}
});
// add some content
doc.drawText('This is a PivotGrid control:');
// add the grid (400pt wide)
wjGridPdf.FlexGridPdfConverter.draw(pivotGrid, doc, 400);
// finish document
doc.end();
});
}
// https://demo.grapecity.com.cn/wijmo/demos/OLAP/PivotGrid/Export/Excel,PDF,CSV/purejs

复制代码

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

Richard.Ma · Richard.Ma

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

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

user99999 · user99999

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

具体代码为：

import '@grapecity/wijmo.styles/wijmo.css'
import * as React from 'react'
import '@grapecity/wijmo.touch' // support drag/drop on touch devices
import * as olap from '@grapecity/wijmo.olap'
import * as gridXlsx from '@grapecity/wijmo.grid.xlsx'
import * as Olap from '@grapecity/wijmo.react.olap'
import { getData } from './data'
class WijmoExcelDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
ng: new olap.PivotEngine({
itemsSource: getData(1000),
valueFields: ['Amount'],
rowFields: ['Buyer', 'Type'],
showRowTotals: 'Subtotals',
showColumnTotals: 'Subtotals'
})
}
}
render() {
return (
<div className='container-fluid'>
<div className='row'>
<div className='col-sm-5'>
<Olap.PivotPanel itemsSource={this.state.ng}></Olap.PivotPanel>
</div>
<div className='col-sm-7'>
<Olap.PivotGrid
itemsSource={this.state.ng}
initialized={this._initializePivotGrid.bind(this)}
></Olap.PivotGrid>
</div>
</div>
<p>
<button id='xlsx' className='btn btn-primary' onClick={() => this._exportGrid('xlsx')}>
Export grid to XLSX
</button>
</p>
</div>
)
}
_initializePivotGrid(sender) {
this._pivotGrid = sender
}
_exportGrid(docType) {
if (docType === 'xlsx') {
// create book with current view
const book = gridXlsx.FlexGridXlsxConverter.saveAsync(this._pivotGrid, {
includeColumnHeaders: true,
includeRowHeaders: true
})
book.sheets[0].name = 'PivotGrid'
// save the book
book.saveAsync('PivotGrid.xlsx')
}
}
}
export default WijmoExcelDemo

复制代码

"@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.touch": "~5.20242.30",
"@grapecity/wijmo.xlsx": "~6.20880.670",

复制代码

webpack版本为5

"webpack": "~5.73.0",
"webpack-bundle-analyzer": "~4.5.0",
"webpack-dev-server": "~4.9.3",
"webpack-merge": "~5.3.0",
"webpackbar": "~5.0.2",

复制代码

user99999 · user99999

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

Richard.Ma · Richard.Ma

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

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

		自动登录	找回密码
密码			立即注册

[处理中] Wijmo导出Excel失败

6 个回复

本帖子中包含更多资源

本帖子中包含更多资源

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人