表格导出Excle文件

guojun@07

已于 2023-08-24 14:05:38 修改

阅读量61

点赞数

分类专栏： JS插件应用文章标签： javascript

于 2023-06-15 11:20:28 首次发布

本文链接：https://blog.csdn.net/guojun19900715/article/details/131222757

版权

JS插件应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该文章描述了如何在Vue.js应用中实现表格数据的导出功能，通过axios库向后端发送POST请求，获取二进制数据流，然后转换为Blob对象，创建并下载Excel文件。同时，文章提到了在导出按钮上应用防抖操作以优化性能。

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

表格数据导出成Excle文件

1.封装请求 exportExcle.js

import axios from 'axios';
export const exportExcle = (data) => {
  return axios({
    url: 'export/excle', // 后端接口地址
    method: 'post',
    headers: { 'content-type': 'application/json' },
    data,
    responseType: "blob"
  })
}

<template>
  <div class="container">
  	<!-- 记得对比导出按钮做防抖操作 -->
  	<el-button type="primary"  @click="exportExcle">导出</el-button>
  	<el-table >..............</el-table>
  </div>
</template>

<script>
// 从 exportExcle.js 中导入 exportExcle 请求方法
import { exportExcle } from '@src/utils/exportExcle.js'
export default {
  methods: {
	    exportExcle () {
	      let fileName = '导出文件的文件名'
	      try {
	        let obj = { 调用后端接口的参数 ... }
	        // exportExcle 调用后端接口查询符合条件的数据
	        exportExcle(obj).then(res => {
	          /* res.data 为如下对象
	            {
	              size: '6960',
	              type: 'application/vnd.ms-excel',
	              [[prototype]]: {
	                arrayBuffer: function(){},
	                size: 6960,
	                slice: function(){},
	                stream: function(){},
	                text: function(){},
	                type: 'application/vnd.ms-excel',
	              }
	            }
	          */
	          this.tableDataExportExcle(res.data, fileName)
	        })
	      } catch (error) {}
		},
	    // table数据导出成excle文件
	    tableDataExportExcle(data, fileName) {
	      const blob = new Blob([data], { type: "application/vnd.ms-excel" });
	      const elink = document.createElement("a");
	      elink.download = `${fileName}-${Date.now()}`; // 确保导出的名字是唯一的
	      elink.style.display = "none";
	      elink.href = URL.createObjectURL(blob);
	      document.body.appendChild(elink);
	      elink.click();
	      URL.revokeObjectURL(elink.href);
	      document.body.removeChild(elink);
	    }
	}
}
</script>