vue项目中点击下载excel表格模板

效果

安装第三方库

yarn add xlsx

创建组件（命名为DownloadExcelTemplate.vue）

<template>
  <div>
    <el-button @click="downloadTemplate">下载模板</el-button>
  </div>
</template>
<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    downloadTemplate() {
      // 创建一个空的工作簿对象
      const workbook = XLSX.utils.book_new();

      // 创建一个名为 "Sheet1" 的工作表
      const worksheet = XLSX.utils.aoa_to_sheet([['Header1', 'Header2', 'Header3']]);

      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成文件对象
      const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 创建下载链接
      const blob = new Blob([excelFile], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = URL.createObjectURL(blob);

      // 创建一个隐藏的 <a> 元素并设置下载链接
      const link = document.createElement('a');
      link.href = url;
      link.download = '培训员工名单.xlsx';

      // 模拟点击事件进行下载
      link.click();

      // 释放 URL 对象
      URL.revokeObjectURL(url);
    }
  }
};
</script>

页面中使用

<template>
  <div>
    <download-excel-template></download-excel-template>
  </div>
</template>

<script>
import DownloadExcelTemplate from './component/DownloadExcelTemplate.vue';

export default {
  components: {
    DownloadExcelTemplate
  }
};
</script>