【无标题】vue前端将接口返回的数据导出为excel表格及后端返回数据流前端导出excel文件的方法

本文链接：https://blog.youkuaiyun.com/m0_67869050/article/details/129085663

本文介绍了如何在Vue项目中利用vue-json-excel插件，从后端获取数据并将其导出为Excel表格。主要步骤包括安装插件、在main.js中引入并注册、以及在页面中调用导出功能。通过定义data和fields，可以自定义要导出的数据和字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端返回的数据以表格的形式导出

1.安装vue-json-excel 插件

npm install vue-json-excel -S

2.main.js里面引入并注册使用

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3、页面中使用

<download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="filename.xls">
    <el-button type="success" size="small" @click="downLoadInfo()">下载平台信息</el-button>
</download-excel>

json_data：需要导出的数据
json_fields：自主选择要导出的字段，若不指定，默认导出全部数据中心全部字段
属性名类型描述
data Array 需要导出的数据，支持中文
fields Object 定义需要导出数据的字段
name String 导出excel的文件名
type String 导出excel的文件类型（xls,csv）,默认是xls

data() {
   return: {
   	       json_fields: {
                "用户名:": "name",    //常规字段
                '密码:': "mima", //支持嵌套属性              
            },
            json_data: [
                {
                    name: "",
                    mima: "",
                }
            ],
            json_meta: [
                [
                    {
                        " key ": " charset ",
                        " value ": " utf- 8 "
                    }
                ]
            ]
   }
}

methods: {
        // 下载平台信息
      downLoadInfo() {
            downLoad({ organizationId: this.sendId }).then(res => {
                console.log('前台地址', res);
            })

            accountInfo({ organizationId: this.sendId }).then(res => {
                console.log('账号信息', res);
                this.json_data[0].name = res.data[0].loginName
                this.json_data[0].mima = res.data[0].loginPassword
            })

            codeInfo({ organizationId: this.sendId }).then(res => {
                console.log('激活码信息', res);
                //activateCode  deviceName
            })
             this.exportMethod()
     },

     exportMethod() {
            axios({
                method: 'get',
                url: 'https://org.zwzlv.com/#/login?redirect=%2Findex',
                responseType: 'blob'
            }).then((res) => {
                let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
                //兼容IE10
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(blob, '报表统计');
                } else {
                    const link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = URL.createObjectURL(blob)
                    link.download = '报表统计' //下载的文件名
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                }
            }).catch(error => {
                console.log(error)
            })
      },
}