Vue 导出 Excel

25 阅读1分钟

依赖下载

npm i exceljs file-saver

简单案例

<script setup>
import { Workbook } from 'exceljs';
import { saveAs } from 'file-saver';

const onExport = async ()=>{
  const workbook = new Workbook()
  const worksheet = workbook.addWorksheet('Employees');
  const cell = worksheet.getCell('A1')
  // 修改单个单元格
  cell.value = 'Name'
  // 写入buffer
  const buffer = await workbook.xlsx.writeBuffer()
  saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Employees.xlsx');
}
</script>

<template>
<button @click="onExport">Export</button>
</template>


导出后的文件如下:

image.png

相关操作

合并单元格

  worksheet.mergeCells('A1:B1')

image.png

添加边框

  worksheet.getCell('A2').border = {
    top:{style:'thin'},
    left:{style:'thin'},
    right:{style:'thin'},
    bottom:{style:'thin'}
  }

image.png

更多

github.com/exceljs/exc…