elementui接收返回的文件流 element ui导出

基于Vue的Element框架如何快速导出Excel表格

文章目录

• 基于Vue的Element框架如何快速导出Excel表格

• 前言
• 一、如何使用？
• 二、使用步骤

• 1.引入库
• 2.代码

• 总结

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何使用？

在VS Code控制台引入依赖

二、使用步骤

1.引入库

Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)，在VSCode中添加：

npm install --save xlsx file-saver

2.代码

代码如下（示例）：

<template>
    <div class="table">
        <!--给表格添加一个id，导出文件事件需要使用-->
        <el-table
        :data="tableData"
        border
        style="width: 100%"
        id="out-table"
        >
        <el-table-column
            prop="date"
            label="日期"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
        >
        </el-table-column>
        </el-table>
        <!--给按钮绑定事件-->
        <button @click="exportExcel">点击导出</button>
    </div>
    </template>

    <script>
    // 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";

    export default {
    name: "javascriptthree",
    data() {
        return {
        tableData: [
            {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
            },
            {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄"
            },
            {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄"
            },
            {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄"
            }
        ]
        };
    },
    mounted() {},
    methods: {
        //定义导出Excel表格事件
        exportExcel() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "sheetjs.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        }
    }
    };
    </script>

    <style scoped>
    .table {
    width: 100%;
    height: 300px;
    }
    </style>

---

总结

上面的方法直接引用在.vue文件就可以用（亲测可用，没有任何问题，如有问题先检查依赖是否添加或者上下id值是否一致），大家在用的时候一定要注意给表格添加的id值与下面的值一致。另外：我在用的时候遇到个问题，我自己写的界面表格（直接访问数据库获得的数据）里面有一个时间戳的格式。例如：2021-10-8 21:46，但是导出表格后变成了2021-10-8没有了时分秒的格式，我怀疑是前端的代码问题并且查看了很多地方的代码。以为是我JavaScript解析时间戳出问题了，后来又在后端中添加时间戳并转换，最终发现的原因是因为WPS的表格文本格式的问题。发现之后苦笑不得，所以大家有时候要相信自己写的代码，一定不要怀疑！！！