#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>

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-24/161790.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！