vue导出表格excel

封装一个downloadUtil.js
<table><el-table><a-table><s-table>都适用
本篇使用得ui框架是ant-design-vue
废话不多说上代码
 

import { message } from 'ant-design-vue'
import * as XLSX from 'xlsx';
 
import FileSaver from 'file-saver';

export default {
	// 对下载的流进行处理，直接从浏览器下载下来
	resultDownload(res) {
		if (res.data.type === 'application/json') {
			// 错误以及无权限
			const reader = new FileReader(res.data)
			reader.readAsText(res.data)
			reader.onload = () => {
				const result = JSON.parse(reader.result)
				message.error(result.msg)
			}
		} else {
			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
			const contentDisposition = res.headers['content-disposition']
			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
			const $link = document.createElement('a')
			$link.href = URL.createObjectURL(blob)
			$link.download = decodeURIComponent(patt.exec(contentDisposition)[1])
			$link.click()
			document.body.appendChild($link)
			document.body.removeChild($link) // 下载完成移除元素
			window.URL.revokeObjectURL($link.href) // 释放掉blob对象
		}
	},

    //url导出，静态资源
	async downloadUrl(url, filename) {
		const index = url.lastIndexOf('/')



		if (!filename) {
			filename = url.substring(index, url.length)
		}

		await fetch(url)
			.then((response) => response.blob())
			.then((res) => {
				console.log(res)
				try {
					let blob = new Blob([res])
					const href = window.URL.createObjectURL(blob) //创建下载的链接
					// 谷歌浏览器 创建a标签 添加download属性下载
					let downloadElement = document.createElement('a')
					downloadElement.href = href
					downloadElement.target = '_blank'
					downloadElement.download = filename
					document.body.appendChild(downloadElement)
					downloadElement.click() // 点击下载
					document.body.removeChild(downloadElement) // 下载完成移除元素
					window.URL.revokeObjectURL(href) // 释放掉blob对象
				} catch (e) {
					console.log('下载失败', e)
				}
			})
	},

	//前端导出
	exportExcel(id,fileName) {
    try {
      // 表格DOM元素
      const tableDOM = document.querySelector(`#${id}`);
	  //克隆table并删除表头与表格中间空行
	  const cloneDom = tableDOM.cloneNode(true)
	  const nullTR = cloneDom.querySelector('.ant-table-measure-row')
	  nullTR.parentNode.removeChild(nullTR);
			
      // 创建导出
      const wb = XLSX.utils.table_to_book(cloneDom, { raw: true });
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      });
      // 导出下载
      FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${fileName}.xlsx`);
    } catch (e) {
      console.log('导出失败', e);
    }
  }
}

如果纯前端导出element-ui的<el-table>或者<table>使用exportExcel方法可以把克隆dom删除的js注释掉

vue中写法
 

<template>
    <a-table
	    id="tableRef"
		:columns="columns"
        :dataSource="dataSource"
    >
        
    </a-table>
</template>
<script setup name="xxx">
	import downloadUtil from '@/utils/downloadUtil'
    const dataSource = ref([
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ],
    const columns= ref([
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ])
    //前端导出
    downloadUtil.exportExcel('tableRef',`文件名`)
    //后端返回文件流导出
    downloadUtil.resultDownload(res)
    //url导出
    downloadUtil.downloadUrl('https:xxxxxx','文件名')
</script>