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

这篇具有很好参考价值的文章主要介绍了VUE: 将Json (后台返回的数据-list) 数据转换为Excel文件并实现前端下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 下载xlsx的包

npm install xlsx@latest

2. vue中的写法

创建button的按钮，添加点击的函数
写函数
函数流程总体来说就是：将json字符串书写写入文件，然后转换为blob的对象，之后通过文件流的方式传递给用户下载
其中的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>