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
- 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-saver
Install better-xlsx and file-saver). - Page introduction plug-in:
import { ExportExcel } from 'sw_react_plug
. - 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
- Introducing plug-ins:
npm install react-html-table-to-excel --save-dev; npm install;
. - Page introduction plug-in:
import ReactHTMLTableToExcel from 'react-html-table-to-excel
. - 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
window.location.href = '/api/xxx/xxx'
.window.open('/api/xxx/xxx? params')
.<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