如何将JSignature生成的签名图片嵌入Django templated_docs文档？

使用Django 4.1.3、templated_docs和JSignature工具，希望将JSignature生成的签名图片直接嵌入到生成的文档中。尝试过draw_signature、templated_docs的{% image %}标签，以及JSignature文档提到的{{form.media}} {{form.field}}等多种组合方式，均未成功。

代码示例 #

from templated_docs import fill_template
from templated_docs.http import FileResponse
from django.http import HttpResponseNotFound
from invoiceManager.models import Invoice
from jsignature.utils import draw_signature

def invoice_view(request, **kwargs):
    pk = kwargs.get('pk', None)
    if pk:
        invoice = Invoice.objects.get(pk=pk)
        information = {
            'repairDate': invoice.repair_date,
            'claim': invoice.claim_authorization_number,
            'customerName': invoice.customer.name,
            'customerAddress': invoice.customer.address,
            'customerCityStateZip': f'{invoice.customer.city} {invoice.customer.state.abbreviation}, {invoice.customer.zip_code}',
            'customerPhone': invoice.customer.phone_number,
            'insuranceName': invoice.insurance.name,
            'policyNumber': f'policy Number: {invoice.policy_number}',
            'VIN': f'VIN: {invoice.vehicle_information.vin}',
            'YMM': f'{invoice.vehicle_information.year} {invoice.vehicle_information.make} {invoice.vehicle_information.model}',
            'customerSignature': draw_signature(invoice.signature),
            'technician': invoice.technician.name,
            'location': invoice.business_location.name,
            'submissionDate': invoice.invoice_submission_date,
            'amount':invoice.invoice_amount, 
        }
        repairLocations = {f'RL{x}':"Repair Made" for x in invoice.location_of_repairs.all().values_list('id', flat=True).order_by().distinct()}
        information.update(repairLocations)
        filename = fill_template(
            'docs/base_invoice.odt', information,
            output_format=".pdf")
        visible_filename = 'invoice{}'.format(".pdf")

        return FileResponse(filename, visible_filename)

异常截图 #

1. 转换签名图片为Base64 Data URI #

draw_signature返回的是PIL Image对象，templated_docs无法直接解析。需要将其转换为Base64编码的Data URI，才能在模板中直接嵌入。

修改视图中处理签名的代码：

import base64
from io import BytesIO

# ... 其他原有代码 ...

# 处理签名图片，生成Data URI
signature_img = draw_signature(invoice.signature)
buf = BytesIO()
# 保存为PNG格式，也可根据需求选JPG
signature_img.save(buf, format='PNG')
buf.seek(0)
# 转换为Base64字符串
base64_str = base64.b64encode(buf.getvalue()).decode('utf-8')
# 生成可直接嵌入的Data URI
signature_data_uri = f'data:image/png;base64,{base64_str}'

# 更新information字典中的签名字段
information['customerSignature'] = signature_data_uri

2. 在ODT模板中正确使用图片标签 #

在你的base_invoice.odt模板中，找到要放置签名的位置，使用templated_docs的{% image %}标签调用：

{% image customerSignature width=250 height=100 %}

可根据实际需求调整width和height参数，保证签名显示比例合适。

3. 验证JSignature存储的数据格式 #

确保invoice.signature存储的是JSignature生成的有效数据：

• 如果存储的是完整的Data URI（如image/jsignature;base64,...），需要先提取Base64部分：

  if invoice.signature.startswith('image/jsignature;base64,'):
      signature_raw = invoice.signature.split(',')[1]
  else:
      signature_raw = invoice.signature
  signature_img = draw_signature(signature_raw)
  

4. 确认templated_docs版本兼容性 #

如果使用的templated_docs版本过旧，可能不支持Data URI嵌入图片，建议升级到最新稳定版：

pip install --upgrade templated_docs

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