Excel文件生成,前端vue项目实现

实现功能:前端点击按钮,下载一个Excel文件,文件内容固定,有前端xlsx库生成。不需要请求后端服务。

DOM元素,使用element组件el-link,点击触发downloadExcelTemplate方法,方法会生成模板Excel文件,并下载文件。

<el-link type="primary" @click="downloadExcelTemplate" :underline="false" :style="{ paddingLeft: '6%' }">下载Excel模板文件</el-link>
        

downloadExcelTemplate方法需要安装xlsx库,并且项目需要导入xlsx。

//安装xlsx库
npm install xlsx

导入xlsx(我使用 import  XLSX from 'xlsx' 导入出错,不知道为什么)

import * as XLSX from 'xlsx'

 downloadExcelTemplate方法:

// 下载模板Excel文件
    downloadExcelTemplate () {
      const header = ['果树编号', '品种','载种日期','备注'];
      const data = [header];

      const worksheet = XLSX.utils.aoa_to_sheet(data);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');
      
      const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([wbout], { type: 'application/octet-stream' });
      
      const fileName = 'Excel文件.xlsx';
      if (navigator.msSaveBlob) { // 兼容IE浏览器
        navigator.msSaveBlob(blob, fileName);
      } else {
        const link = document.createElement('a');
        if (link.download !== undefined) {
          const url = URL.createObjectURL(blob);
          link.setAttribute('href', url);
          link.setAttribute('download', fileName);
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      }
    }

生成Excel文件截图