xlsx插件导出与接口导出的使用

xlsx插件下载

npm install xlsx@0.18.5

xlsx传入数据导出

  import * as XLSX from 'xlsx';
 // 导出
 const handlerExcel = () => {
        //表头,  有null的原因是想要合并,   备注会合并三列, 居中
        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 }];
    //合并数据, s是起始单元格, 行列以0行0列开始,   e是结束的单元格,  c是列, r是行
    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');
  }

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('下载成功！');
}