导出功能无法使用--@antv/s2-react-components,是否有其他导出方法

[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;

`

[cy2zq]

参考官网地址---https://s2.antv.antgroup.com/examples/react-component/export/#export

[lijinke666]

#3059