#vue3 实现前端下载excel文件模板功能

一、需求:

前端无需通过后端接口,即可实现模板下载功能。

通过构造一个 JSON 对象,使用前端常用的第三方库 xlsx,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板

二、效果:

三、源码如下:

复制代码
npm 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>
相关推荐
Tajang12 小时前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多12 小时前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
星空下的曙光12 小时前
Node.js 事件循环(Event Loop)
node.js
龙仔CLL12 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李12 小时前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒13 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码13 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
不学习何以强国13 小时前
Cool Unix + OpenAuth.Net 实现一款校园小程序的开发
mysql·前端框架·asp.net
reembarkation13 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张15 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview