<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>


  • 由于業務內容的需要,我們有時候需要將表格中的數據做導出,生成一個excel表格,以下操作主要實現將element中的table數據生成一個excel表格并做下載操作。

    效果圖如下:

    ?點擊圖中導出按鈕時,將表格中的數據導出為一個excel文件并下載。

    如下

    ?

    ?操作步驟如下:

    1.下載相應的依賴 (命令如下)

    npm install --save xlsx file-saver

    2.下載完成后引入相應的插件

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

    ? ? ? ? 2.import * as XLSX from "xlsx";

    3.在相關頁面引入代碼后定義方法
    exportExcel() { //轉換成excel時,使用原始的格式 var xlsxParam = { raw: true }; let fix =
    document.querySelector(".el-table__fixed"); let wb;
    //判斷有無fixed定位,如果有的話去掉,后面再加上,不然數據會重復 if (fix) { wb = XLSX.utils.table_to_book(
    document.querySelector("#tableId").removeChild(fix),xlsxParam);
    document.querySelector("#tableId").appendChild(fix); } else { wb =
    XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam); } var
    wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array", });
    try { FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream"
    }),"導出詳情單.xlsx"); } catch (e) { if (typeof console !== "undefined")
    console.log(e, wbout); } return wbout; },
    4.給el-table中定義一個id
    <el-table :data="tableData" id="tableId" style="width: 100%"> </el-table>
    步驟基本完成,運行項目后點擊導出按鈕便可實現表格數據下載導出為excel表。

    完整代碼如下
    <template> <div class="administrativeCase-container"> <div
    class="content-box"> <div class="box-btn"> <div class="btn"> <div> <el-button
    type="primary">導入</el-button> <el-button @click="exportExcel()">導出</el-button>
    </div> </div> </div> <div class="box-content"> <el-table :data="tableData"
    id="tableId" style="width: 100%"> <el-table-column prop="date" label="日期" fixed
    width="180"> </el-table-column> <el-table-column prop="name" label="姓名" fixed
    width="180"> </el-table-column> <el-table-column prop="address" label="地址">
    </el-table-column> <el-table-column prop="date" label="日期" width="180">
    </el-table-column> <el-table-column prop="name" label="姓名" width="180">
    </el-table-column> <el-table-column prop="address" label="地址">
    </el-table-column> <el-table-column prop="date" label="日期" width="180">
    </el-table-column> <el-table-column prop="name" label="姓名" width="180">
    </el-table-column> <el-table-column prop="address" label="地址">
    </el-table-column> </el-table> </div> </div> </div> </template> <script> import
    FileSaver from "file-saver"; import * as XLSX from "xlsx"; export default {
    data () { return { tableData: [{ date: '2016-05-02', name: '王小虎', address:
    '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路
    1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, {
    date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' }], } },
    methods:{ // 導出 exportExcel() { //轉換成excel時,使用原始的格式 var xlsxParam = { raw: true
    }; let fix = document.querySelector(".el-table__fixed"); let wb;
    //判斷有無fixed定位,如果有的話去掉,后面再加上,不然數據會重復 if (fix) { wb = XLSX.utils.table_to_book(
    document.querySelector("#tableId").removeChild(fix),xlsxParam );
    document.querySelector("#tableId").appendChild(fix); } else { wb =
    XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam); } var
    wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array", });
    try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream"
    }), "導出詳情單.xlsx" ); //文件名 } catch (e) { if (typeof console !== "undefined")
    console.log(e, wbout); } return wbout; }, } } </script> <style> </style>

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频