1. 内容概述
本节主要为您介绍React框架中自定义导出功能。用户可以根据自己的需要在页面自定义导出按钮来一键导出文档,可以导出的格式包括HTML、PDF、EXCEL等。
2. 具体实现
自定义导出API
/** * 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>;
React页面具体实现代码
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"));
3. 实现效果