Table表格导出Excel表格 两种方式

1，不调接口 导出的是 页面上的内容；

Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)

安装依赖：npm install –save xlsx file-saver

两个插件的详细地址在下面

https://github.com/SheetJS/js-xlsxhttps://github.com/eligrey/FileSaver.js
复制代码

代码部分(有注释解释说明)

    <template>
    <div class="table">
        <!--给表格添加一个id，导出文件事件需要使用-->
        <el-table
        :data="tableData"
        border
        style="width: 100%"
        id="out-table"
        >
        <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>
        <!--给按钮绑定事件-->
        <button @click="exportExcel">点击导出</button>
    </div>
    </template>

    <script>
    // 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";

    export default {
    name: "javascriptthree",
    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 弄"
            }
        ]
        };
    },
    mounted() {},
    methods: {
        //定义导出Excel表格事件
        exportExcel() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "sheetjs.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        }
    }
    };
    </script>

    <style scoped>
    .table {
    width: 100%;
    height: 300px;
    }
    </style>
复制代码

如果数据中带有‘100%’等数据，不想被处理为小数，加{raw:true}即可

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

2，调后台接口  导出 页面上每一条的详细内容；

//导出    
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: "未登录或会话超时",            
                });            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.navigator && window.navigator.msSaveOrOpenBlob) {              
                    navigator.msSaveBlob(blob, "小型工程项目查询.xlsx");                            } else {              
                    const link = document.createElement("a");              
                    link.style.display = "none";              
                    link.href = URL.createObjectURL(blob);              
                    link.setAttribute("download", "小型工程项目查询.xlsx");              
                    document.body.appendChild(link);              
                    link.click();              
                    document.body.removeChild(link);            
                }          
            }        
        })        
        .catch((error) => {          
            this.loading = false;          
            this.$message({            
                type: "error",            
                message: error,          
            });        
        });    
    },
复制代码

搞定！！！