当前位置:首页 » 《随便一记》 » 正文

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

17 人参与  2024年02月19日 13:51  分类 : 《随便一记》  评论

点击全文阅读


一、需求:

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

通过构造一个 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>


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/69066.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1