vue导出表格

image.png

axios请求

// 导出表格
export const postExcel=(url, data = {},name)=> {
    return new Promise((resolve, reject) => {
        axios.post(`${url}`,data,{
                headers:{'Content-Type':'application/json'},
                responseType:'blob', // 表明返回服务器返回的数据类型
            }
        )
        .then(res => {
            resolve(res);
            const blob = new Blob([res]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
            const fileName = name;//下载文件名称
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);

        })
        .catch(err => {
            reject(err.data)
        })
    });
}

main.js中引用

import { postExcel } from "./utils/api";
Vue.prototype.postExcel = postExcel;

<el-button type="success" size="small" @click="imporItem">导出资产</el-button>

 this.postExcel("/propertyPaymentBase/exportPropertyPayment", data,'充值明细.xlsx');//调用