vue3 实现Excel下载模板

原创已于 2023-04-11 11:52:35 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #vue.js #excel

于 2023-04-11 11:45:47 首次发布

vue 专栏收录该内容

10 篇文章

订阅专栏

文章讲述了如何根据业务需求在WPS中创建Excel模板，并将其集成到Vue项目中。对于Vue3.0和Vue2.0项目，分别指定了模板文件的位置。提供了一段Vue组件代码用于实现模板的下载功能，点击按钮即可下载名为上传模板.xlsx的文件。

1、根据业务需要直接在wps规定Excel模板保存（文件名可以是中文或英文），如下：

2、直接复制excel文件到vue项目中，如下：

vue3.0版本的在项目public目录下新建static文件夹，放入“文件模板.xlsx”文件。

vue2.0版本的在项目根目录下的static文件夹，放入“文件模板.xlsx”文件。

3、下载模板

<template>
    <el-button type="primary" icon="download"@click="downloadTemplate">下载模板</el-button>
</template>

<script setup>

   const  downloadTemplate=() =>{
      let a = document.createElement("a");
      a.href = "./static/上传模板.xlsx";  //对应模板
      // a.download = "上传模板.xlsx"; //如果文件名是英文，可以在这里修改下载的文件名
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
   }

</script>