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

自由的云h
3,134 阅读3分钟

官网：vxetable.cn/
Gitee：gitee.com/x-extends/v…
Github：github.com/x-extends/v…

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

安装

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

npm install vxe-pc-ui@4.3.90 vxe-table@4.11.3

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

// 完整导入表格和配套的 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 高级导出，弹出窗口，支持自定义勾选高级参数导出

{A4337D8A-E8E1-4666-BDFE-0449E61984EC}.png

导出后的 txt 文件

{A31914BA-91EB-4FEF-85BE-CB4FD0ECE582}.png

<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

{AC42C87E-F9A7-4554-8F92-E54D158C7CC7}.png

导出后的 html 文件

{614FCE9C-F461-46B1-AB00-D62684D24061}.png

<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

{CEF09A4C-1B10-4893-908D-156737538F82}.png

导出后的 xml 文件

{953EFC95-CBF5-491C-AAE3-AA0DFA5FE9B7}.png

<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

{9F832272-064A-4CC1-A539-3D1E1F5DACDF}.png

导出后的 csv 文件

{9CB90779-0497-4270-832F-310B2A5E3F49}.png

<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)

{2B22F572-49B8-4548-A2AA-F8C6BFF2510B}.png

导出后的 xlsx 文件

{115EC246-506A-4BDD-A51B-772B1A251B0E}.png

<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)

{DF1523B0-59A3-4D82-8593-055BDD9F5380}.png

导出后的 pdf 文件

{8FFB859D-5189-499A-A7E7-C412710C5038}.png

<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 github.com/x-extends/v… gitee gitee.com/xuliangzhan…

avatar
文章
阅读
粉丝