实现下载excel文件模板功能

最新推荐文章于 2025-02-25 16:35:52 发布

别undefined辣

最新推荐文章于 2025-02-25 16:35:52 发布

阅读量529

点赞数 2

文章标签： excel

本文链接：https://blog.csdn.net/2201_75568521/article/details/139983357

版权

一.使用`<a>`标签创建一个下载链接，前端准备下载文件

准备模版文件：准备一个模板文件将作为用户下载的模版。这个文件可以是静态资源，存储在你的项目public目录下，或者存放在服务器上。
创建下载链接：使用<a>标签创建一个下载链接，指向你的模板文件。download属性指定了下载时的文件名，可以自定义。
```
<a href="public/excel/template.xlsx" download="example_template.xlsx">点击下载模板</a>
```

二.使用xlsx插件

前端无需通过后端接口，即可实现模板下载功能。通过构造一个 JSON 对象，使用前端常用的第三方库 xlsx，可以直接将该 JSON 对象转换成 Excel 文件，让用户下载模板。

pnpm install xlsx

<template>
  <div class="download">
    <el-button type="warning" @click="downloadTemplate">下载模板</el-button>
  </div>
</template>
 
<script setup>
import * as XLSX from 'xlsx';
 
const writeFileAsync = (workbook, filename, options) => {
    return new Promise((resolve, reject) => {
        try {
            XLSX.writeFile(workbook, filename, options);
            resolve();
        } catch (error) {
            reject(error);
        }
    });
};
 
const downloadTemplate = async () => {
    // 构造json
    const json = [
        {
            问题: '',
            答案: '',
        },
    ];

 
    // 将json数据转换成excel文件
    const worksheet = XLSX.utils.json_to_sheet(json);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
 
    try {
        // 将excel 文件保存为blob
        const blob = await writeFileAsync(workbook, '模板.xlsx', { bookType: 'xlsx', mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
 
        if (blob instanceof Blob) {
            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
 
            // 创建隐藏的a标签，设置下载链接并触发点击
            const a = document.createElement('a');
            a.href = url;
            a.download = 'excel.template.xlsx';
            document.body.appendChild(a);
            a.click();
 
            // 释放对象url
            window.URL.revokeObjectURL(url);
 
            // 等待5秒后关闭模态框
            setTimeout(() => {
                document.body.removeChild(a);
            }, 5000);
        } else {
            throw new Error('Invalid Blob');
        }
    } catch (error) {
        //console.error('Error creating object URL:', error);
    }
};
 
 
 
</script>
 
<style lang="scss" scoped>
.download{
  padding: 20px;
}
</style>

三.使用接口，后端提供excel模版下载

<el-button type="primary" @click="getModel">下载模板</el-button>

// 获取模板 
const getModel = async () => {
  let res = await getTemplateExcel({ excelTemplateType: 2 })
  let date = formatTimeToStr(new Date())
  const xlsx = "application/vnd.ms-excel"
  const blob = new Blob([res.data], { type: xlsx })
  let fileName = "Excel模板" + date + ".xlsx"
  let a = document.createElement("a")
  a.download = fileName
  a.href = window.URL.createObjectURL(blob)
  a.click()
  a.remove()
}