Easy Invoice PDF 项目中实现动态显示/隐藏PDF列的技术方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07126/article/details/148665143

Easy Invoice PDF 项目中实现动态显示/隐藏PDF列的技术方案

easy-invoice-pdf Free, Open-Source Invoice PDF Generator – Live Preview, Runs in Your Browser, No Sign-Up 项目地址: https://gitcode.com/gh_mirrors/ea/easy-invoice-pdf

背景介绍

在Easy Invoice PDF这个开源项目中，用户经常需要根据不同的业务场景自定义PDF发票的显示内容。一个常见的需求是能够动态控制发票中各列的显示与隐藏，比如金额列、增值税列等。本文将详细介绍如何在该项目中实现这一功能。

技术实现方案

数据结构设计

首先需要在Zod模式验证器中为每个需要控制显示/隐藏的字段添加布尔值属性。例如：

const invoiceSchema = z.object({
  // 其他现有字段...
  amountFieldVisible: z.boolean(),
  vatFieldVisible: z.boolean(),
  descriptionFieldVisible: z.boolean()
  // 可根据需要添加更多字段
});

这种设计使得每个字段的可见性都可以独立控制，为前端UI和后端PDF生成提供了清晰的配置接口。

前端UI实现

在前端界面中，可以为每个可控制的字段添加开关组件：

<FormField
  control={form.control}
  name="amountFieldVisible"
  render={({ field }) => (
    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
      <div className="space-y-0.5">
        <FormLabel>显示金额列</FormLabel>
      </div>
      <FormControl>
        <Switch
          checked={field.value}
          onCheckedChange={field.onChange}
        />
      </FormControl>
    </FormItem>
  )}
/>

这种UI设计直观明了，用户可以轻松地通过开关控制各列的显示状态。

PDF生成逻辑调整

在PDF生成部分，需要根据用户的配置动态调整表格列的渲染：

const generatePDF = (invoiceData) => {
  const columns = [];
  
  // 基础列（始终显示）
  columns.push({ title: '序号', dataKey: 'index' });
  
  // 条件列
  if (invoiceData.amountFieldVisible) {
    columns.push({ title: '金额', dataKey: 'amount' });
  }
  
  if (invoiceData.vatFieldVisible) {
    columns.push({ title: '增值税', dataKey: 'vat' });
  }
  
  // 使用columns数组生成PDF表格...
};

这种实现方式确保了PDF生成时只包含用户选择显示的列，提高了发票的自定义程度。