VUE: 将Json (后台返回的数据-list) 数据转换为Excel文件并实现前端下载

1. 下载xlsx的包

npm install xlsx@latest

2. vue中的写法

1. 创建button的按钮，添加点击的函数
2. 写函数
3. 函数流程总体来说就是： 将json字符串书写写入文件，然后转换为blob的对象，之后通过文件流的方式传递给用户下载
4. 其中的jsonData可以通过axios请求后端传递来的数据。

<template>
    <div class="main">
            <button @click="downloadExcel">下载文件button>
    div>
template>

<script>
import { utils, writeFile } from 'xlsx';


export default {
    name: 'FAQ',
    data() {
        return {
            base_url: 'http://127.0.0.1:5000/',

        }
    },
    methods: {
        downloadExcel() {
            const jsonData = [
                { name: 'John', age: 30 },
                { name: 'Jane', age: 28 },
                { name: 'Bob', age: 35 }
            ];
            const worksheet = utils.json_to_sheet(jsonData);
            const workbook = utils.book_new();
            utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            const excelData = writeFile(workbook, 'data.xlsx', { type: 'blob', bookType: 'xlsx' });

            const url = URL.createObjectURL(excelData);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'data.xlsx';
            link.click();
            URL.revokeObjectURL(url);      

        }
    },


}
script>


<style scoped>

style>