vue、element-ui中导出excel

最新推荐文章于 2024-08-21 15:41:43 发布

飞与幻的assassin

最新推荐文章于 2024-08-21 15:41:43 发布

阅读量343

点赞数

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_42920104/article/details/121044003

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法1（前端自行获取数据导出Excel）

<el-button
    type="success"
    icon="el-icon-download"
    size="mini"
    @click="exportExcel('tab', '导出事件表格')"    
>导出</el-button>

<el-table v-show="false" :data="tableData" id="tab">
    ...
</el-table>

async exportExcel (id, name) {
      //保存起旧数据
    let page = this.queryParams.pageNum
    let pgSize = this.queryParams.pageSize
    this.queryParams.pageNum = 1
    this.queryParams.pageSize = this.total
    // 获取数据
    let res = await listEvt(this.queryParams)
    this.tableData = res.rows
    // 在数据更新到DOM后，开始导出Excel
    this.$nextTick(() => {
        var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(
            document.querySelector('#' + id),
            xlsxParam
        )
        /* 获取二进制字符串作为输出 */
        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'
                }),
                //设置导出文件名称
                name + '.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        // 恢复原来的数据
        this.queryParams.pageNum = page
        this.queryParams.pageSize = pgSize
        return wbout
    })
},

方法2（后端接口导出Excel）

// 导出用户
export function exportUser(query) {
  return request({
    url: '/system/user/export',
    method: 'post',
    data: query,
    responseType: 'blob', // 表明返回服务器返回的数据类型，此处一定要填
  })
}

<el-button
    type="success"
    icon="el-icon-download"
    size="mini"
    @click="handleExport"    
>导出</el-button>

/** 导出按钮操作 */
 handleExport() {
   let queryParams = Object.assign({}, this.queryParams)
   queryParams.pageSize = 99999999
   this.$confirm('是否确认导出所有用户数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
   })
     .then(function () {
       return exportUser(queryParams)
     })
     .then((res) => {
       const blob = new Blob([res], {type: "application/json"});
       const fileName = '导出村居.xlsx';
       const elink = document.createElement('a');
       elink.download = fileName;
       elink.style.display = 'none';
       elink.href = URL.createObjectURL(blob);
       document.body.appendChild(elink);
       elink.click();
       URL.revokeObjectURL(elink.href); // 释放URL 对象
       document.body.removeChild(elink);
     }).catch(err => {
     console.log(err);
   })
 },