导出报错，有其他导出方式吗?https://s2.antv.antgroup.com/examples/react-component/export/#export

[cy2zq]

参考官网示例，官网示例是报错（也无法使用），但是报错内容和我本地不同，
——我本地使用 版本
"@antv/s2": "^2.1.6",
"@antv/s2-react": "^2.1.5",
"@antv/s2-react-components": "^2.1.2",

只要使用import {
StrategyExport,
FrozenPanel,
ThemePanel,
} from "@antv/s2-react-components"; @antv/s2-react-components的组件就报错，

报错内容如下----

完整代码如下----
`
import { generatePalette, getPalette } from "@antv/s2";
import { SheetComponent } from "@antv/s2-react";
import {
StrategyExport,
FrozenPanel,
ThemePanel,
} from "@antv/s2-react-components";
import { ColorPicker, Card, Button } from "antd";
import { useState, useRef } from "react";

import "@antv/s2-react/dist/style.min.css";
import "@antv/s2-react-components/dist/s2-react-components.min.css";
import "./index.less";

function getRandomInt(max) {
return Math.floor(Math.random() * max);
}

const PALETTE_COLORS = [
{
limit: 10,
background: "#b8e1ff",
},
{
limit: 20,
background: "#b4d3fb",
},
{
limit: 30,
background: "#7daaff",
},
{
limit: 40,
background: "#5b8ff9",
},
{
limit: 50,
background: "#3d76dd",
},
{
limit: 60,
background: "#085ec0",
},
{
limit: 70,
background: "#085ec0cc",
},
{
limit: 80,
background: "#0047a5",
},
{
limit: 90,
background: "#00318a",
},
{
limit: 100,
background: "#001d70",
},
];

const getTargetColor = (value) => {
if (Number.isNaN(Number(value))) {
return PALETTE_COLORS[0].background;
}

return PALETTE_COLORS[Math.floor(Number(value) / 10)].background;
};

const PaletteLegend = () => {
return (

0%

{PALETTE_COLORS.map((color) => (
<span
key={color.background}
className="palette-color"
style={{ background: color.background }}
/>
))}

100%

);
};
let data1 = [
{
浙江二建: "xxx%",
indexType: "同比",
indexName: "应收账款占营收比例",
indexCfgId: xxx,
集团: null,
span: 0,
},
];

const TooltipContent = (props) => {
console.log(props, 184);
return

ddd

;
};

const App = (props) => {
const s2Ref = useRef(null);
let s1 = {
// width: 800,
// height: 530,
// hierarchyType: 'tree',

interaction: {
  selectedCellsSpotlight: false,
  hoverHighlight: false,
},
style: {
  layoutWidthType: "colAdaptive",
  colCell: {
    hideValue: true,
  },
  dataCell: {
    width: 100,
  },
},
conditions: {
  text: [
    {
      field: "count",
    },
  ],
  background: [
    {
      field: "count",
      mapping(value) {
        // const backgroundColor = getTargetColor(value);

        return {
          // fill: backgroundColor,
        };
      },
    },
  ],
},

};
console.log(props, 357);
let s2 = {
fields: {
rows: ["indexName", "indexType"],
columns: [],
values: ["浙江二建", "集团"],
valueInCols: true,
},
meta: [
{
field: "indexName",
name: "指标名称",
},
{
field: "indexType",
name: "明细",
},
{
field: "classification",
name: "分类",
},
{
field: "company",
name: "公司",
},
{
field: "count",
name: "数值",
},
],
data: data1,
};
const [themeColor, setThemeColor] = useState("gray");
const [themeCfg, setThemeCfg] = useState({
name: "gray",
});

const updatePalette = (newThemeColor) => {
// 使用内置的 colorful 色板作为参考色板
const palette = getPalette(themeCfg.name);
// 使用参考色板 & 主题色值生成新色板
const newPalette = generatePalette({
...palette,
brandColor: newThemeColor,
});

// 使用新色板设置主题
setThemeCfg({
  name: themeCfg.name,
  palette: newPalette,
});

};
return (
<div {...props}>

{//}
<ColorPicker
format={"rgb"}
value={themeColor}
onChange={(v) => {
setThemeColor(v);
updatePalette(v?.toRgbString());
}}
/>
{/<StrategyExport/}
{/* sheetInstance={s2Ref.current}/}
{/ onCopySuccess={(data) => {/}
{/ console.log("copy success:", data);/}
{/ }}/}
{/>/}
{/ 导出数据/}
{/*/}
<ThemePanel
title="主题配置"
disableCustomPrimaryColorPicker={false}
defaultCollapsed={false}
onChange={(options, theme) => {
setThemeCfg({
name: options.themeType,
theme,
});
s2Ref.current?.setOptions({
hierarchyType: options.hierarchyType,
});
s2Ref.current?.render(false);
console.log("onChange:", options, theme);
}}
onReset={(options, prevOptions, theme) => {
console.log("onReset:", options, prevOptions, theme);
}}
/>
<SheetComponent
adaptive={{ width: true, height: true }}
sheetType="pivot"
dataCfg={s2}
options={s1}
themeCfg={
themeCfg || {
name: "colorful", //'dark','gray'
}
}
ref={s2Ref}
/>


);
};

export default App;

`

Originally posted by @cy2zq in #3058

[github-actions]

你好 @cy2zq:

提 Issue 须知

⚠️ 在提出问题前，请确保你已经仔细阅读👓/搜索🔍过 官方文档 和 常见问题 以及 图表示例, 并且已经搜索查阅过相关 Issues 列表 和 Discussions 列表. 当你确定自己的问题没有解决方案时，请提交 issue。 ⚠️

如果是使用问题，不知道怎么用，移步 Discussions 讨论区 并提供 有效信息 进行 提问。

参与社区共建

这是一个开源项目, 我们也有繁忙的业务要做, 是用自己的业余时间在维护, 为爱发电, 精力有限, 所以有时候 issue 响应速度不是那么及时, 如果你遇到了问题, 或者对 Issues 和 Discussions 列表的问题感兴趣, 可以直接认领并尝试修复 (贡献指南)，帮助 S2 变得更好, 而不是一味的埋怨和催促, 我们不是甲方乙方的关系.

[cy2zq]

补充参考--https://s2.antv.antgroup.com/api/components/export#1-%E5%AF%BC%E5%87%BA-csv 也报错

代码如下---
import {
generatePalette,
getPalette,
Export,
asyncGetAllPlainData,
download,
} from "@antv/s2";

<Button
onClick={async () => {
console.log(s2Ref.current, 414);
const spreadsheet = s2Ref.current;

        // 拿到复制数据 (text/plain)
        const data = await asyncGetAllPlainData({
          sheetInstance: s2Ref,
          split: ",",
          formatOptions: true,
          // formatOptions: {
          //   formatHeader: true,
          //   formatData: true
          // },

          // 同步导出
          // async: false
        });

        console.log(data);
        // if (spreadsheet) {
        //   const exportData = new Export(spreadsheet);
        //   exportData.export("csv", "data.csv");
        // }
      }}
    >
      自定义导出按钮
    </Button>

[lijinke666]

参考官网示例，官网示例是报错（也无法使用），但是报错内容和我本地不同，

官网的 React 导出组件示例有问题, 写法需要修改, 后续优化, 可以直接使用 @antv/s2 的导出方法, 本质是一样的, 参考 https://s2.antv.antgroup.com/zh/examples/interaction/basic/#copy-export

报错内容如下----

你的报错是你使用的打包工具的问题, 和官网的报错没有任何关系, 通常是的打包工具太老了

解决方法参考 #3008 (comment)

补充参考--s2.antv.antgroup.com/api/components/export#1-导出-csv 也报错

这个函数找不到, 需要你自己排查下为什么, 检查下本地安装的版本

[cy2zq]

一 我试了下直接导出的@antv/s2的实例，调用方法是可以的，但下钻导出是csv的那个，我想咨询下要导出Excel格式的如xlsx,是不是不支持。
二 版本最新的，新建的umi项目，我那个提示找不到（这个函数找不到, 需要你自己排查下为什么, 检查下本地安装的版本）这个应该是传入 sheetInstance: s2Ref 或者s2Ref.current,这个传入实例不对，函数是可以打印出来的。这个我回头再试一下。

[lijinke666]

我想咨询下要导出Excel格式的如xlsx,是不是不支持

不支持, 只支持 csv

实例获取不到可以尝试保存为 state, 触发一下组件更新

function App() {
  const [sheetInstance, setSheetInstance] = React.useState<SpreadSheet>();

  const onMounted = (s2: SpreadSheet) => {
    setSheetInstance(s2);
  };

  return (
    <>
      <Export sheetInstance={sheetInstance} />
      <SheetComponent onMounted={onMounted}/>
    </>
  )
}

[cy2zq]

可以了（实例获取不到可以尝试保存为 state, 触发一下组件更新

），感谢；我咨询下你们有木有收费类似的企业级报表产品，支持复杂报表的导出Excel功能；