1, do not adjust the interface to export the content on the page;
The el-table table export in the Element component library requires two main dependencies :(XLSX and file-saver)
Install dependencies: NPM install –save XLSX file-saver
The detailed addresses of the two plug-ins are below
https://github.com/SheetJS/js-xlsxhttps://github.com/eligrey/FileSaver.js
Copy the codeCode section (annotated)
<template> <div class="table"> <! --> <el-table :data="tableData" border style="width: 100%" id="out-table" > <el-table-column prop="date" label=" date" width="180" > </el-table-column> <el-table-column Prop ="name" label=" name" width="180" > </el-table-column> <el-table-column prop="address" label=" address" > </el-table-column> </el-table> <! </button> </div> </template> <script from "file-saver"; import XLSX from "xlsx"; Export default {name: "javascriptthree", data() {return {tableData: [{date: "2016-05-02", name: "wang Jiewu ", address: }, {date: "2016-05-04", name: "Wang Xiaohu ", address: "2016-05-01", name: {date: "2016-05-03", name: "Wang Xiaohu ", address:" 1516 Lane, Jinshajiang Road, Putuo District, Shanghai "}]}; }, mounted() {}, methods: {// define exportExcel table event exportExcel() {/* generate workbook object from the table */ var wb = XLSX.utils.table_to_book(document.querySelector("#out-table")); /* Get the binary string as output */ var wbout = xlsx. write(wb, {bookType: "XLSX ", bookSST: true, type: "array"}); Try {FileSaver. SaveAs (// The Blob object represents an immutable, raw, file-like object. //Blob does not necessarily represent data in JavaScript native format. // The File interface is based on the Blob, inheriting the functionality of the Blob and extending it to support files on the user's system. // Return a newly created Blob object whose contents are concatenated from the array given in the argument. New Blob([wbout], {type: "application/octet-stream"}), // Set the name of the export file "sheetjs. XLSX "); } catch (e) { if (typeof console ! == "undefined") console.log(e, wbout); } return wbout; }}}; </script> <style scoped> .table { width: 100%; height: 300px; } </style>Copy the codeIf you don’t want the data to be treated as decimal, add {raw:true}
var wb = XLSX.utils.table_to_book(document.querySelector(“#out-table”),{raw:true});
2. Adjust the background interface to export the detailed content of each item on the page;
DoExport () {let data = {page: "", pageSize: "-1", startDate: this.startDate, endDate: this.endDate, searchType: this.formInline.searchType, flowStatus: this.formInline.flowStatus, tenderOrgType: this.formInline.tenderOrgType, industryType: this.formInline.industryType, constructOrgName: this.formInline.constructOrgName, searchName: this.formInline.searchName, }; this.loading = true; axios({ method: "post", url: "/mingc/project_statistics/exportData", data, responseType: "blob", }) .then((res) => { console.log(res, "990"); If (res.status === 401) {this.$message({type: "error", message: "not logged in or session timeout ",}); this.$router.push(".. /login"); } if (res.status === 200) { this.loading = false; const link = document.createElement("a"); let blob = new Blob([res.data], { type: "application/octet-stream; charset=UTF-8", }); If (window. The navigator && window. The navigator. MsSaveOrOpenBlob) {the navigator. MsSaveBlob (blob, "small project query. XLSX"); } else { const link = document.createElement("a"); link.style.display = "none"; link.href = URL.createObjectURL(blob); Link.setattribute ("download", "Small Engineering project query. XLSX "); document.body.appendChild(link); link.click(); document.body.removeChild(link); } } }) .catch((error) => { this.loading = false; this.$message({ type: "error", message: error, }); }); },Copy the codeDone!!