实现功能:前端点击按钮,下载一个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文件截图