vue3前端页面下载excel模版

1.excel上传到public目录下

在这里插入图片描述

2.代码中引用excel路径

<el-space direction="horizontal" size="small">
        <el-button @click="handleChangePage">刷新列表</el-button>
        <el-button type="primary" @click="handleBatchUpload">批量上传</el-button>
        <a :href="templateUrl" download="阿里巴巴全链接表_模版.xlsx">
          <el-button type="info">下载 Excel 模板</el-button>
        </a>
      </el-space>

const templateUrl = '/public/阿里巴巴全链接表_模版.xlsx'
Vue3 中前端导出 Excel 的通常做法是利用一些第三方库,如 `xlsx` 或者 `vue-excel-export`,它们可以方便地将数据转换为 Excel 格式并生成下载链接。以下是基本步骤: 1. **安装依赖**: 首先需要安装对应的库,例如通过 npm 安装: ```shell npm install axios xlsx // 或者 vue-xlsx-export 如果你选择后者 ``` 2. **引入和配置**: 引入所需的模块并在 Vue 实例中注册使用: ```javascript import XLSX from 'xlsx'; import { exportExcel } from 'vue-excel-export'; // 如果使用 vue-excel-export Vue.prototype.$exportExcel = function (data, filename) { // ... }; ``` 3. **导出函数实现**: 使用库提供的 API 将数据转为 Excel 表格,然后创建 download URL: ```javascript Vue.prototype.$exportExcel = function (data, filename) { let workbook = XLSX.utils.book_new(); let ws = XLSX.utils.aoa_to_sheet(data); XLSX.utils.book_append_sheet(workbook, ws, filename || "sheet1"); let buffer = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' }); let blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); let url = window.URL.createObjectURL(blob); /* 或者使用 vue-excel-export */ // exportExcel({ data, filename, blob }, true); // 第二个参数表示是否显示预览 setTimeout(() => { // 这里可以设置点击按钮后的操作,比如自动下载或弹窗提示下载 window.location.href = url; window.URL.revokeObjectURL(url); }, 0); }; ``` 4. **在组件中使用**: 在你需要导出 Excel 的地方调用这个方法,传入你要导出的数据和文件名: ```html <button @click="$emit('downloadExcel', yourData, 'example.xlsx')">导出 Excel</button> ``` 并在父组件接收这个事件,触发导出: ```html <template> <child-component @downloadExcel="handleDownloadExcel"></child-component> </template> <script> methods: { handleDownloadExcel(data, filename) { this.$exportExcel(data, filename); } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值