如何用borb为动态可填写PDF添加提交数据至REST API的按钮

当然可以用borb实现这个需求。borb提供的JavaScriptPushButton允许嵌入自定义JavaScript代码，用来收集表单字段数据并通过fetch请求发送到服务器。

完整实现代码 #

from borb.pdf import Document, Page, PDF
from borb.pdf.canvas.layout.page_layout.multi_column_layout import SingleColumnLayout
from borb.pdf.canvas.layout.table.fixed_column_width_table import FixedColumnWidthTable
from borb.pdf.canvas.layout.form_field.text_field import TextField
from borb.pdf.canvas.layout.form_field.push_button import JavaScriptPushButton
from borb.pdf.canvas.layout.alignment import Alignment

# 创建PDF文档及页面布局
doc = Document()
page = Page()
doc.add_page(page)
layout = SingleColumnLayout(page)

# 添加示例表单字段（需设置field_name以便JS识别）
layout.add(TextField(field_name="username", label="用户名"))
layout.add(TextField(field_name="email", label="邮箱"))

# 添加带提交逻辑的按钮
layout.add(
    FixedColumnWidthTable(number_of_columns=2, number_of_rows=1)
    .add(
        JavaScriptPushButton(
            text="提交",
            javascript="""
                // 收集所有表单字段数据
                const formFields = this.getFieldNames();
                const formData = {};
                formFields.forEach(fieldName => {
                    const field = this.getField(fieldName);
                    formData[field.name] = field.value;
                });

                // 发送POST请求到服务器
                fetch('https://your-server-api.com/submit-form', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData),
                })
                .then(res => res.json())
                .then(data => app.alert(`提交成功：${JSON.stringify(data)}`))
                .catch(err => app.alert(`提交失败：${err.message}`));
            """,
            horizontal_alignment=Alignment.RIGHT,
        )
    )
    .set_padding_on_all_cells(5)
)

# 保存生成的PDF
with open("submit_form.pdf", "wb") as out_file:
    PDF.dumps(out_file, doc)

关键说明 #

• 字段收集逻辑：通过this.getFieldNames()获取所有表单字段名，遍历后用this.getField(fieldName)拿到字段值，构造JSON格式的请求体
• 请求发送：使用标准fetch API发送POST请求，需替换代码中的服务器端点为实际地址
• 结果反馈：用PDF内置的app.alert()方法在阅读器中显示提交结果，方便用户确认

注意事项 #

• 仅支持支持JavaScript的PDF阅读器（如Adobe Acrobat），部分轻量阅读器可能无法执行JS逻辑
• 服务器需配置CORS策略，允许PDF所在环境的跨域请求（若在浏览器中打开PDF）
• 所有表单字段必须设置field_name属性，否则JS无法识别并获取字段值

内容的提问来源于stack exchange，提问作者SoroushA