//动态设置数据源
report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);

import React, {Fragment} from "react";
import "@grapecity/activereports-localization-zh";
import ReactDOM from "react-dom";
import {Viewer as ReportViewer} from "@grapecity/activereports-react";
import "@grapecity/activereports-localization";

async function loadData() {
    //使用Fetch Api提取数据 
    const headers = new Headers();

    const dataRequest = new Request(
        "https://demodata.grapecity.com/northwind/api/v1/Customers",
        {
            headers: headers,
        }
    );

    const response = await fetch(dataRequest);
    const data = await response.json();
    return data;
}

async function loadReport(){
    //从文件加载定义报表
    const reportResponse = await fetch( "reports/p-report.rdlx-json");
    const report = await reportResponse.json();
    return report;
}


function App() {
    const viewerRef = React.useRef();
    React.useEffect(()=>{
        async function openReport(){
            const data = await loadData();
            const report = await loadReport();
            //动态设置数据源
            report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
            viewerRef.current.Viewer.open(report);
        }
        openReport();
    }, []);
    return (
        <div id="viewer-host" style={{position: "absolute",height: "100%"}}>
            <ReportViewer ref={viewerRef} language={"zh"}/>
        </div>
    );
}

ReactDOM.render(<App/>, document.getElementById("root"));