vue2导出表格
1.下载保存文件插件
npm i file-saver --asve
2.在想导出页面引入
import { saveAs } from "file-saver"
3.配置接口参数
// 导出文件接口
export const CustomerExportApi = (params, configs) => instance.post("/prod-api/customer/export", params, configs)
4.使用接口导出文件
事件
触发
// 导出
async exec() {
// 调用导出接口
const res = await CustomerExportApi({
pageNum: 1,
pageSize: 10
}, {
// 配置响应头,把二进制转换为表格
headers: {
"Content-Type": "application/X-www-from-urlencoded"
},
responseType: "blob"
})
if (!res) return
console.log(res);
// 导出文件和设置文件名称加时间为文件名避免重复文件名
saveAs(
new Blob([res]), `客户档案_${new Date().getTime()}.xlsx`
)
},
vue3导出表格
下载
npm install xlsx
引入
import * as XLSX from 'xlsx'; // Vue3 版本
事件
<el-button class="getExport" @click="detail_Export" type="primary">导出</el-button>
触发
// 导出表格
async function detail_Export() {
// 请求接口数据
const res: any = await Emolument_get_salary({
staff_id: staff_id.value || "",
month_id: time_id.value || "",
branch_id: branch_id.value || ""
})
if (res.code === 1) {
// 定义表格头部标题
let head: any = {
branch_id: '部门',
staff_name: "姓名",
order_number: "订单编号",
deal_total_price: "成交金额",
jing_profit: "净利润",
return_money: "单笔回款金额",
createtime: "回款时间",
actual_return_money: "实际回款金额",
return_money_total: "实际总回款",
get_profit: "单笔到账利润",
percent_name: "提成比例",
get_money: "提成金额",
}
// 遍历数据
let list: any = res.data.detail.map((item: { [x: string]: any; }) => {
const obj: any = {}
for (const k in item) {
if (head[k]) {
if (head[k] == "部门") {
obj[head[k]] = item[k] == '1' ? "第一个部门" : "第二个部门"
} else {
obj[head[k]] = item[k]
}
}
}
return obj
})
// 创建工作表
const data = XLSX.utils.json_to_sheet(list)
// 创建工作簿
const wb = XLSX.utils.book_new()
// 将工作表放入工作簿中
XLSX.utils.book_append_sheet(wb, data, '薪酬统计提成明细列表')
// 生成文件并下载
XLSX.writeFile(wb, '薪酬统计提成明细列表.xlsx')
} else {
//导出失败提示
ElMessage.error(res.msg)
}
}