jsPDF-AutoTable 完全配置与使用指南

jsPDF-AutoTable 完全配置与使用指南

【免费下载链接】jsPDF-AutoTable jsPDF plugin for generating PDF tables with javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsPDF-AutoTable

项目概述

jsPDF-AutoTable 是一个专为 jsPDF 设计的 JavaScript 插件，用于在客户端生成包含复杂表格的 PDF 文档。该项目主要使用 TypeScript 开发，支持从 HTML 表格解析或直接使用 JavaScript 数组数据创建表格。

核心技术栈

• jsPDF: PDF 生成的核心引擎
• TypeScript: 项目主要开发语言
• HTML/CSS: 支持从现有网页表格直接转换
• JavaScript: 数据处理和插件调用的核心语言

安装方法

npm 安装（推荐）

npm install jspdf jspdf-autotable

CDN 引入

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@latest/dist/jspdf.plugin.autotable.js"></script>

基础使用

从 HTML 表格生成

import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'

const doc = new jsPDF()
doc.autoTable({ html: '#my-table' })
doc.save('table.pdf')

使用 JavaScript 数组数据

const doc = new jsPDF()
doc.autoTable({
  head: [['ID', 'Name', 'Email', 'Country']],
  body: [
    ['1', 'Simon', 'simon@example.com', 'Sweden'],
    ['2', 'Karl', 'karl@example.com', 'Norway'],
  ],
})
doc.save('table.pdf')

核心配置选项

内容选项

• html: HTML 表格元素或 CSS 选择器
• head: 表头数据数组
• body: 表格主体数据数组
• foot: 表尾数据数组
• columns: 列定义数组，提供更精细的列控制

样式选项

• theme: 主题风格，支持 'striped'、'grid'、'plain'
• styles: 全局样式设置
• headStyles: 表头样式
• bodyStyles: 表格主体样式
• footStyles: 表尾样式
• columnStyles: 列特定样式

布局选项

• startY: 表格起始位置
• margin: 页边距设置
• tableWidth: 表格宽度控制
• pageBreak: 分页行为设置

高级特性

单元格合并

支持行合并和列合并，可以创建复杂的表格布局：

doc.autoTable({
  body: [
    [{ content: '合并单元格', colSpan: 2, rowSpan: 2, styles: { halign: 'center' } }],
])

钩子函数

jsPDF-AutoTable 提供了丰富的钩子函数用于自定义表格内容：

• didParseCell: 解析单元格后调用，可修改内容或样式
• willDrawCell: 绘制单元格前调用，可设置原生 jsPDF 样式
• didDrawCell: 绘制单元格后调用，可添加图片或其他内容
• willDrawPage: 绘制页面前调用，可添加页眉
• didDrawPage: 绘制页面后调用，可添加页脚

自定义样式示例

doc.autoTable({
  head: headRows(),
  body: bodyRows(),
  styles: {
    lineColor: [44, 62, 80],
    lineWidth: 1,
  },
  headStyles: {
    fillColor: [241, 196, 15],
    fontSize: 15,
  },
  didDrawCell: function(data) {
    if (data.section === 'body' && data.column.index === 0) {
      doc.addImage(coinBase64Img, 'PNG', data.cell.x + 5, data.cell.y + 2, 5, 5)
    }
  },
})

主题风格

条纹主题 (striped)

默认主题，交替行背景色，提供良好的可读性。

网格主题 (grid)

显示所有单元格边框，适合需要清晰分隔的数据。

简约主题 (plain)

无背景色和边框，适合简洁的文档风格。

实用示例

分页处理

当表格内容超过页面高度时，自动进行分页处理，支持设置分页行为。

水平分页

当表格宽度超过页面宽度时，支持水平分页功能：

doc.autoTable({
  horizontalPageBreak: true,
  horizontalPageBreakRepeat: 'id', // 重复显示 ID 列
})

开发与测试

本地开发

启动开发服务器：

npm start

构建项目

npm run build

运行测试

npm test

最佳实践

1. 数据准备: 确保数据格式正确，表头与主体数据匹配
2. 样式规划: 预先设计好表格样式，保持一致性
3. 性能优化: 对于大数据量表格，考虑分页和优化策略

通过本指南，您可以快速掌握 jsPDF-AutoTable 的核心功能和高级特性，为您的项目添加强大的 PDF 表格生成能力。

【免费下载链接】jsPDF-AutoTable jsPDF plugin for generating PDF tables with javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsPDF-AutoTable