PC端导出xlsx文件列表

最新推荐文章于 2024-08-15 12:28:07 发布

cyz_hd

最新推荐文章于 2024-08-15 12:28:07 发布

阅读量157

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cyz_hd/article/details/130106881

版权

该代码段展示了如何在Vue应用中结合ElementUI的表格组件和file-saver、xlsx库来实现数据下载为Excel文件。首先，导入必要的模块，然后在查询方法中加载数据并显示在表格中。当用户触发下载时，选择表格的DOM节点，将其转换为Excel格式，并使用FileSaver保存为.xlsx文件。

摘要由CSDN通过智能技术生成

下载并引入

import FileSaver from 'file-saver'
import xlsx from 'xlsx'

使用Element的table表格下载

        queryDetails(obj) {
            this.alllod = this.$loading({  // 全屏loading
                lock: true,
                text: '数据较多,请耐心等待！',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.loading = true
            queryxfyh({
                pageNum: '',
                pageSize: '',
                dc: '2',
                ...obj
            }).then(res => {
                if (res.returnCode == 1) {
                    this.loading = false
                    this.tableData1 = res.returnData
                } else {
                    this.loading = false
                    this.$message({
                        type: "error",
                        center: true,
                        message: res.returnMsg,
                    });
                }
            }).then(() => {
                this.loading = false
                this.getHttpList()
            })
        },
        getHttpList() {
            let xlsxParam = { raw: true }   // 导出内容只做解析，不转换格式，可以解决导出数字过长时的科学计算
            let et = xlsx.utils.table_to_book(document.querySelector('#mxmytable'), xlsxParam); //此处传入table的DOM节点
            let etout = xlsx.write(et, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            })
            try {
                FileSaver.saveAs(new Blob([etout], {
                    type: 'application/octet-stream'
                }), '下载文件名.xlsx');   //trade-publish.xlsx 为导出的文件名
                this.dialogTableVisible = false
                this.alllod.close();
            } catch (e) {
                console.log(e, etout);
            }
            return etout;

        }