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>