1. If the back end does not do or does not support report export

(1) Another encapsulation based on the better-xlsx and file-saver plug-ins
  1. Introducing plug-ins:npm install sw_react_plug --save-dev; npm install;(If the better-xlsx and file-saver packages have been introduced, if not, they need to be executed again.npm install --save-dev better-xlsx file-saverInstall better-xlsx and file-saver).
  2. Page introduction plug-in:import { ExportExcel } from 'sw_react_plug.
  3. Reference:<ExportExcel fileName= XXX column={columns} dataSource={data} />; The column is a configuration description of the table column, and the dataSource is an array of data (corresponding to ant Design’s columns and dataSource).

Note: This direct reference will render once to load and download, so we need to use conditional judgment to load. Int: status = 0; 2. Click the event: status++; 3. Use: {status! == 0 && <ExportExcel {… RxportExcelProps} / >}; (You can use status && XXX directly, using an implicit conversion.)

(2) ReactHTMLTableToExcel plug-in
  1. Introducing plug-ins:npm install react-html-table-to-excel --save-dev; npm install;.
  2. Page introduction plug-in:import ReactHTMLTableToExcel from 'react-html-table-to-excel.
  3. Reference:<ReactHTMLTableToExcel className="download-table-xls-button" table="table-to-xls" filename="file_name" Sheet ="sheet_name" buttonText=" sheet_name" />; <table ... id="table-to-xls">xxx</table>;;
Special note: After using the UI library, there may be some changes. For example, antD needs to do this with hooks: import ReactDOM from'react-dom';
        const tableEl = useRef(null);
        useEffect(() => {
        const tableCon = ReactDOM.findDOMNode(tableEl.current);
        const table = tableCon.querySelector('table'); // Get the table table.setattribute ('id',`table-to-xls`); // Set attributes for the table},[]); <Table ref='table_El'/ >; Note: If the Table cannot be assigned, wrap div around the Table and assign div to ref.Copy the code

Call the back-end interface

(1) GET request
  1. window.location.href = '/api/xxx/xxx'.
  2. window.open('/api/xxx/xxx? params').
  3. <a href={`/api/xxx/xxx? Params'} download=" report. XLSX ">
(2) POST request

A direct call to the interface returns a table stream file format like this:

We need to use a Blob object to specify the file or data to read. Let’s take the Axios request as an example

axios.post('/apis/api/refund/getRefundFile', {... payload}, { responseType:'blob'}).then(res => { const BLOB = res.data; // The Blob object represents an immutable, raw file-like object (the File interface is based on Blob) const fileReader = new fileReader (); // The FileReader object allows a Web application to asynchronously read the contents of a file stored on the user's computer filereader.readasDataURL (BLOB); // Start reading the contents of the specified Blob. Once done, the result property will contain a Base64 string in data: URL format to represent the contents of the file being read filereader.onLoad = (event) => {// Handle the load event. This event fires when the read operation is complete // create a new downloaded a tag and remove it when it is finished.let a = document.createElement('a'); A.ownload = 'data report. XLSX'; a.href = event.target.result; document.body.appendChild(a); a.click(); document.body.removeChild(a); } }).catch(err => { console.log(err.message) });Copy the code
(3) Can also operate like this:
const clickHandle = src => {
    var iframe = document.createElement('iframe');
    iframe.src = src ;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}
Copy the code