vue vxe-table 最强表格导出功能，直接导出表格数据，支持导出 html、xml、csv、txt、xlsx、pdf 等格式

官网文档：https://vxetable.cn

用户有个需求，要求将页面的数据直接导出 xlsx，发现 vxe-table 直接就能支持各种导出，不管是本地导出，服务端导出都能支持，接下来详细分享用法以及安装方式，使用非常简单，都是几行代码就能实现强大的数据导出功能。由于官网功能强大到离谱，这里没法全部展示，只介绍常用的功能，更多复杂自定义建议去看官网更详细。

在这里插入图片描述

安装

不管是 vue2 还是 vue3 全都支持，接下来以 vue3 版本安装为例，vue2 版本安装具体去看官方文档。

npm install vxe-pc-ui@4.2.26 vxe-table@4.7.94

安装最新版本，最新版本的渲染性能是最好，比老版本的渲染性能提升巨大，虚拟渲染支持更好更流畅。

// 完整导入表格和配套的 UI
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...

导出 txt

导出功能非常简单，内置就支持很多种格式。
通过调用 exportData 静默导出，type 指定格式
通过调用 openExport 高级导出，弹出窗口，支持自定义勾选高级参数导出
在这里插入图片描述
导出后的 txt 文件

<template>
  <div>
    <vxe-button @click="exportEvent">直接导出 TXT 文件</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  showFooter: true,
  exportConfig: {},
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ],
  footerData: [
    { seq: '合计', sex: '666', age: '999' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'txt'
    })
  }
}
</script>

导出 html

在这里插入图片描述
导出后的 html 文件

<template>
  <div>
    <vxe-button @click="exportEvent">直接导出 HTML 文件</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  showFooter: true,
  exportConfig: {},
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ],
  footerData: [
    { seq: '合计', sex: '666', age: '999' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'html'
    })
  }
}
</script>

导出 xml

在这里插入图片描述
导出后的 xml 文件

<template>
  <div>
    <vxe-button @click="exportEvent">直接导出 XML 文件</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  showFooter: true,
  exportConfig: {},
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ],
  footerData: [
    { seq: '合计', sex: '666', age: '999' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'xml'
    })
  }
}
</script>

导出 csv

在这里插入图片描述
导出后的 csv 文件

<template>
  <div>
    <vxe-button @click="exportEvent">直接导出 CSV 文件</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  showFooter: true,
  exportConfig: {},
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'no1', title: 'NO1' },
    { field: 'no2', title: 'NO2 String', cellType: 'string' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', no1: '028', no2: '028' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', no1: '220', no2: '220' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', no1: '003200', no2: '003200' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', no1: '02040', no2: '02040' }
  ],
  footerData: [
    { seq: '合计', sex: '666', age: '999' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'csv'
    })
  }
}
</script>

导出 xlsx

导出 excel 文件需要非常复杂的库去解析，所以官网也有提供适配插件，装好扩展插件，也是一样用法直接就能导出。

npm install @vxe-ui/plugin-export-xlsx@4.0.3 exceljs

此处的 exceljs 第三方库，建议使用 CDN 方式，只要在 html 引入就可以了。建议将文件下载下来，放到自己项目，避免 CDN 不能访问导致项目挂掉。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/exceljs@4.2.1/dist/exceljs.min.js"></script>

import { VxeUI } from 'vxe-table'
import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx'

VxeUI.use(VxeUIPluginExportXLSX)

在这里插入图片描述
导出后的 xlsx 文件

<template>
  <div>
    <vxe-button @click="exportEvent">直接导出 XLSX 文件</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  border: true,
  showFooter: true,
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'no1', title: 'NO1' },
    { field: 'no2', title: 'NO2 String', cellType: 'string' }
  ],
  data: [
    { id: 10001, name: '张三', role: 'Develop', sex: 'Man', no1: '028', no2: '028' },
    { id: 10002, name: '李四', role: '研发', sex: 'Women', no1: '220', no2: '220' },
    { id: 10003, name: '王五', role: '产品经理', sex: 'Man', no1: '003200', no2: '003200' },
    { id: 10004, name: '老六', role: 'Designer', sex: 'Women', no1: '02040', no2: '02040' }
  ],
  footerData: [
    { seq: '合计', name: '12人', no1: '356' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'xlsx'
    })
  }
}
</script>

导出 pdf

导出 pdf 文件需要非常复杂的库去解析，所以官网也有提供适配插件，装好扩展插件，也是一样用法直接就能导出。

npm install @vxe-ui/plugin-export-pdf@4.0.5 jspdf

此处的 jspdf 第三方库，建议使用 CDN 方式，只要在 html 引入就可以了。建议将文件下载下来，放到自己项目，避免 CDN 不能访问导致项目挂掉。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.js"></script>

import { VxeUI } from 'vxe-table'
import VxeUIPluginExportPDF from '@vxe-ui/plugin-export-xlsx'

VxeUI.use(VxeUIPluginExportPDF)

在这里插入图片描述
导出后的 pdf 文件

<template>
  <div>
    <vxe-button @click="exportEvent">直接导出</vxe-button>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const gridRef = ref()

const gridOptions = reactive({
  border: true,
  showFooter: true,
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address' }
  ],
  data: [
    { id: 10001, name: '张三', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: '李四', role: 'Test', sex: 'Women', age: 22, address: '广东省' },
    { id: 10003, name: '王五', role: 'PM', sex: 'Man', age: 32, address: '上海' },
    { id: 10004, name: '老六', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ],
  footerData: [
    { seq: '合计', name: '12人', age: '356' }
  ]
})

const exportEvent = () => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.exportData({
      type: 'pdf'
    })
  }
}
</script>

pdf 中文乱码解决方法

安装字体库

VxeUI.use(VxeUIPluginExportPDF, {
  // 支持中文字体
  fontName: 'SourceHanSans-Normal',
  fonts: [
    {
      fontName: 'SourceHanSans-Normal',
      fontUrl: 'https://cdn.jsdelivr.net/npm/@vxe-ui/plugin-export-pdf@4.0.5/fonts/source-han-sans-normal.js'
    }
  ]
})

github https://github.com/x-extends/vxe-table
gitee https://gitee.com/xuliangzhan/vxe-table

vue vxe-table 最强表格导出功能，直接导出表格数据，支持导出 html、xml、csv、txt、xlsx、pdf 等格式

安装

导出 txt

导出 html

导出 xml

导出 csv

导出 xlsx

导出 pdf

pdf 中文乱码解决方法

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

jQuery get 方法内操控vue变量（异步ajax请求方法中操控双向绑定的响应式变量）实现异步请求函数内完成变量的双向响应式绑定

echarts 折线图上只显示某一个点值

月工作总结

2022高职国家技能大赛（大数据竞赛）-模块E：数据可视化-任务书4

nodejs vue校园二手交易系统 73kl6

Vue3 UI库与组件库（如Vuetify、Element Plus）

彻底搞懂Vue中的Mixin混入（保姆级教程）

vue封装el-cascader级联选择器组件单选、多选、搜索、数据回显问题

Vue 前端开发中的路由知识：从入门到精通

前端哥

C/C | 每日一练 (2)

Linux性能监控工具汇总

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

DeepSeek 提示词：定义、作用、分类与设计原则

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

Python常见面试题的详解16

Docker实战-使用docker compose搭建博客

QQ登录测试用例报告

乐享数科：供应链金融—三个不同阶段的融资模式

【Deepseek】Linux 本地部署 Deepseek

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

3
CSS常用属性（文本属性）

2024-11-04 09:11:111000

4
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

5
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

6
vue使用datav echarts

2024-09-06 00:09:381000

7
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

8
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

9
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

10
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000