xlsx插件下载
npm install xlsx@0.18.5
xlsx传入数据导出
import * as XLSX from 'xlsx';
const handlerExcel = () => {
let headers = ['订单号', '产品编码', '产品名称', '单位', '生产数量', '集配排产数量', '计划完工时间', '备注', null, null];
let data =[
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
];
handlerExportData(headers, data);
};
function handlerExportData(header, data) {
const cols = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 },{ wch: 20 },{ wch: 20 }];
let merges = [{ s: { c: 7, r: 0 }, e: { c: 9, r: 0 } }];
data.unshift(header);
const workbook = XLSX.utils.book_new();
const sheet = XLSX.utils.aoa_to_sheet(data);
sheet['!cols'] = cols;
sheet['!merges'] = merges;
XLSX.utils.book_append_sheet(workbook, sheet);
XLSX.writeFile(workbook, '缺料表' + '.xlsx');
}
![导出](https://i-blog.csdnimg.cn/direct/b9498d6274f04bfa96b5d8f8faf659b7.png)
xlsx导出dom结构
<template>
<div id="table">
<table>
表格内容随便写
<table>
<div>
<button @click="handlerClick">导出</button>
</template>
<script setup>
import { writeFile, write, read, utils } from 'xlsx';
function handlerClick(){
const wb = utils.table_to_book(document.querySelector('#table'));
writeFile(wb, '导出的表格.xlsx');
}
</script>
接口导出下载
async function exportClick(){
let res = await exportApi();
let link = document.createElement('a');
link.style.display = 'none';
if (res) {
link.setAttribute('download', res.data.name);
link.href = '/dev' + res.data.url;
link.click();
}
createMessage.success('下载成功!');
}