/**
 * Exports currently displayed report to specified output format. Returns object which contains result data as blob object | string and download function. So you could either use this blob object or download file immediately. Please note that you can specify settings in PDF export as plain list (like **{title: 'Title', author: 'Author Name', ownerPassword: '1'}** etc...
 *
 * ```javascript
 * var options = {filename:"Invoice List"};
 * var cancelCallback = function(){
 *     return false; // continue export. Return true to cancel export process
 * }
 * viewer.export('pdf', options, {cancel: cancelCallback }).then(result => doSmthWithBlob(result.data));
 * //or you can download file
 * viewer.export('pdf', options, {cancel: cancelCallback }).then(result => result.download('Invoice List'));
 * ```
 *
 * @param format  Export format identifier. One of 'pdf', 'xlsx', 'html', 'tabular-data'.
 * @param settings  Format specific export settings.
 * @param params  Additional export customization.
 */
export(format: string, settings: Record<string, string | boolean | number>, params?: {
    cancel?: () => boolean;
}): Promise<ExportResult>;

import React, {Fragment} from "react";
import "@grapecity/activereports-localization-zh";
import ReactDOM from "react-dom";
import {Viewer as ReportViewer} from "@grapecity/activereports-react";
import { exportDocument as PdfExport } from "@grapecity/activereports/pdfexport";
import { exportDocument as XlsxExport } from "@grapecity/activereports/xlsxexport";
import { exportDocument as HtmlExport } from "@grapecity/activereports/htmlexport";
import "@grapecity/activereports-localization";

function App() {
    const viewer = React.useRef();

    // 导出PDF
    function exportPdf() {
        viewer.current.export('pdf', {}, {}).then(result => result.download("pdfExport"));
    }

    // 导出excel
    function exportExcel() {
        viewer.current.export('xlsx', {}, {}).then(result => result.download("xlsxExport"));
    }

    // 导出html
    function exportHtml() {
        viewer.current.export('html', {}, {}).then(result => result.download("htmlExport"));
    }

    return (
        <Fragment>
            <div style={{padding:"10px"}}>
                <button onClick={exportPdf}>导出PDF</button><span style={{padding:"10px"}}></span>
                <button onClick={exportExcel}>导出Excel</button> <span style={{padding:"10px"}}></span>
                <button onClick={exportHtml}>导出Html</button> <span style={{padding:"10px"}}></span>
            </div>
            <div id="viewer-host" style={{height: "800px"}}>
                <ReportViewer report={
                    {
                        Uri: "reports/p-report.rdlx-json",
                        Params: {"P1": "1"}
                    }
                } ref={viewer} language={"zh"}/>
            </div>
        </Fragment>
    );
}

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