Depend on the installation

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader
Copy the code

The meanings of -s and -d are as follows:

-s => –save-d => –save-dev Which method is used to install dependencies in the actual development environment

Create (download) the Export2Excel file

This file is not hard to find in the NPM, Github and other open source communities, so use files found in other communities to introduce the project (beta available). Export2Excel. Js: Export2Excel. Js: Export2Excel. Js: Export2Excel. Js: Export2Excel

Used in the project

Create an Excel folder under the project Components folder and put the Export2Excel. Js and blob. js files downloaded previously. If the Export2Excel. Js and blob.js files are not in the same folder class, please remember to change the blob.js file path introduced in Export2Excel.

Add a code snippet to the public method file (util.js) in the project

// Export method tHeader => Set the title of the first row of the Excel table filterVal => Export the property key value of the object listData => Export data => Export (file) name export function outExportExcel(tHeader = [], filterVal = [], listData = [], exportName = new Date().getTime()) { require.ensure([], () = > {/ / pay attention to the const Export2Excel path = {export_json_to_excel} the require (' @ / components/excel/Export2Excel '); const data = formatJson(filterVal, listData); export_json_to_excel(tHeader, data, exportName); }); } function formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }Copy the code

Add a code snippet to the page that needs to export the table

HTML

< button@click ="handeleOutExportExcel" class=" export-bTN "size="mini" type="primary">Copy the code

VUE

Import {outExportExcel} from '@/common/util'; import {outExportExcel} from '@/common/util'; export default { data() { return { tableData: [] } }, created() { // ..... }, methods: {handeleOutExportExcel() {const {tableData} = this; Const tableHeader = [' id ', 'name ',' language ']; const tableKey = ['number', 'name', 'grade']; }}};Copy the code

Click the export button on the page and witness the miracle. The exported file is shown in the following figure. It indicates that the Excel file is successfully exported using Export2Excel. Otherwise, you need to start again

More details can be found at www.lancema.com/life-catego…