Vue表格导出excal

一、前端导出

下载依赖：

安装file-saver:

$ npm install file-saver --save

 安装xlsx：

$ npm install xlsx

在所需页面引入：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

 给所需要导出的表格添加id

<el-table :data="transformedData" border id="out-table">
            <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item.label" :property="item.property" :index="item.index" align="center">
                <template slot-scope="scope">
                    <div>
                        <p v-if="scope.column.property !='supplierDayList'">{{ scope.row[scope.column.property] }}</p>
                        <p v-else>{{ scope.row[scope.column.property][scope.column.index].totalPrice }}</p>
                    </div>
                </template>
            </el-table-column>
        </el-table>

 在methods方法里：

excal(){
            // /**out-table关联导出的dom节点 */
            var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
            // get binary string as output
            var wbout = XLSX.write(wb,{bookType:'xlsx',bookSST:true,type:'array'})
            console.log(wbout,'我是wbout');
            try{
                FileSaver.saveAs(new Blob([wbout],{type:'application/octet-stream'}),'供应商日合计表.xlsx')
            }catch(e){
                if (typeof console !== 'undefined') {
                    console.log(e,wbout)
                }
            }
            return wbout
        }

成功导出！

二、获取后端返回的数据流进行导出

 方法如下：

excal(){
            axios({
                method: "get",
                url: '/storage/export/records',
                responseType: "blob", // 表明返回服务器返回的数据类型
                params:this.formInline
            })
                .then((response) => {
                    console.log(response,'我爱HZ');
                // 处理返回的文件流
                let blob = new Blob([response.data], { type: response.type });
                //获取fileName,截取content-disposition的filename；按=分割，取最后一个
                console.log(response.headers['content-disposition'],'我是response.headers');
                const fileName = decodeURI(response.headers['content-disposition'].split("=")[1], "UTF-8");
                let downloadElement = document.createElement("a");
                let href = window.URL.createObjectURL(blob); //创建下载的链接
                downloadElement.href = href;
                downloadElement.download = fileName; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
                window.URL.revokeObjectURL(href); //释放blob
                // this.$message.success("[图书信息]已成功导出!");
                Message({
                    message:"已成功导出!",
                    type:'success'
                })
                })
                .catch(function(error) {
                // 请求失败处理
                Message({
                    message:error,
                    type:'error'
                })
                });
        },

导出完成！