前端導(dǎo)出，不需要調(diào)用后臺接口后臺導(dǎo)出，前端直接實現(xiàn)導(dǎo)出功能

導(dǎo)出table數(shù)據(jù)

js 引入

? import?FileSaver?from?"file-saver";

??import?XLSX?from?"xlsx";

table id??out-table

<el-table

??????id="out-table"

??????:data="tableData"

??????v-loading="loading"

??????style="width:?100%"

??????max-height="100%"

??????class="dialog-table"

??????header-row-class-name="table-header"

??????row-class-name="table-row"

????>? ? </el-table>

<el-button?class="search-btn?out-btn"?@click="leadingOut"?type="success">導(dǎo)出</el-button>

js代碼? table 的id 需要為?out-table

leadingOut()?{

??????console.log("點擊導(dǎo)出");

??????this.loading=true;

??????var?wb?=?XLSX.utils.table_to_book(document.querySelector("#out-table"),{raw:true});

??????var?wbout?=?XLSX.write(wb,?{

????????bookType:?"xlsx",

????????bookSST:?true,

????????type:?"array"

??????});

??????try?{

????????FileSaver.saveAs(

??????????new?Blob([wbout],?{?type:?"application/octet-stream"?}),

??????????`${this.title}.xlsx`

????????);

?????????this.loading=false;

??????}?catch?(e)?{

????????if?(typeof?console?!==?"undefined")?console.log(e,?wbout);

??????????this.loading=false;

??????}

??????return?wbout;

????},