前端下载excel表格文件——flie-saver导出类型为csv或者xlsx

最新推荐文章于 2024-07-13 10:09:10 发布

小昭，快敲代码去~

最新推荐文章于 2024-07-13 10:09:10 发布

阅读量1.8k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/mzy110_/article/details/125934502

版权

这篇博客介绍了如何在纯前端环境中利用file-saver库导出表格数据为xlsx或csv格式。首先通过npm安装file-saver，然后在vue组件中设置按钮触发导出操作。当点击导出时，先获取表头和数据，如果无数据则提示，否则重新请求全部数据并导出。同时提供了一种替代方法，通过生成csv字符串直接下载。注意，此方法可能只能导出当前页面数据，如需导出所有数据需额外处理。

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

前言：这边导出表格数据是纯前端自己导出数据
下面方法可以导出格式为xlsx或者csv格式
首先要下载file-saver第三方依赖
npm install file-saver --save
然后直接上代码啦，拿来粘贴复制就行了

//index.vue文件中
<el-button size="mini" class="downloadData" @click="handleDownloadData">导出excel</el-button>
 async handleDownloadData() {
            // 导出表格的表头设置;
            let allColumns = this.tableTitle;
            let list = [];
            this.loading = true;
            if (!this.total) {
                this.$message.warning('暂无数据，无法导出');
                return;
            }
            //因为这个file-saver只能下载当前页面的，所以在下载的时候只能重新请求一次表格数据，把返回表格的总数居给上参数pageSize，这样就可以完美导出表格数据啦
            await searchData({
                ...this.params,
                page: 1,
                pageSize: this.total,
            })
                .then(res => {
                    list = res.data.list;
                })
                .finally(() => {
                    this.loading = false;
                });
            exportCsvDowload(list, allColumns, `demo.csv`);//表格后缀名也可以改成xxx.xlsx
        },


```javascript
在utils.js中，要记得在文件中引用呀~~~~~
// 导出scv或excel
//data是表格数据，columnArrData是表头数据，excelName是导出表格名字
export function exportCsvDowload(data, columnArrData, excelName) {
    const columnArr = columnArrData.map(one => one.label);
    const columnArrKey = columnArrData.map(one => one.value);
    let str = columnArr.join(',');
    // 通过循环拿出data数据源里的数据，并塞到str中
    for (const item of data) {
        str += '\n ';
        for (const item1 of columnArrKey) {
            str += `${(typeof item[item1] === 'string' && item[item1].replace(/[\n\r\s\t,]/g, ' ')) || item[item1]},`;
        }
    }
    // Excel打开后中文乱码添加如下字符串解决
    const exportContent = '\uFEFF';
    const blob = new Blob([exportContent + str], {
        type: 'text/plain;charset=utf-8',
    });
    FileSaver.saveAs(blob, excelName, true);
}

上面方法有一个缺点就是只能导出表格当前页数据。如果想要导出表格所有数据，需要重新请求一次表格数据，参数是表格数据返回来的total数据。
上面这种方法是我亲测有效的！！！
下面第二种是我朋友推荐的方法，测试了也是完全ok的~~~~

<button onclick="ExportExcel('测试123')">下载excel</button>
  function ExportExcel(name) {
        // 这是标题
        let data = '序号,内容,姓名,年龄\n';
        // 这是内容

        for (let i = 0; i < 100000; i++) {
            data += i.toString() // 第一列
                + ',这是测试内容, 张三' // 第二列
                + i.toString() + ','  // 第三列
                + Math.floor(Math.random() * 80 + 10) + ',\n' // 第四列
        }
        console.log(data)
        //由于Excel单元格对于数字只支持15位，且首位为0会舍弃 建议用 =“数值”
        let blob = new Blob([data], {type: "text/plain;charset=utf-8"});
        //解决中文乱码问题
        blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
        const object_url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = object_url;
        link.download = name + ".xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }