kcubik / html-form-with-signature-to-pdf-in-gcp-cloud-storage-bucket

A simple Google App Engine application to provide a HTML form with a signature pad. The form content can saved to a PDF file and stored in a GCP Cloud Storage Bucket.

HTML Form With Signature To PDF In GCP Cloud Storage Bucket

A simple Google App Engine application to provide a HTML form with a signature pad. The form content can saved to a PDF file and stored in a GCP Cloud Storage Bucket. The application uses the following components:

• Bootstrap CSS v4.5.2
• Flask v1.1.2
• Google App Engine (Standard Environment)
• PyFPDF v1.7.2
• SignaturePad v2.3.2

Modifications to app.yaml

Change BUCKET_NAME to name of your Cloud Storage Bucket.

env_variables:
  CLOUD_STORAGE_BUCKET: "BUCKET_NAME"

Bootstrap CSS

Include the Bootstrap CSS file in your HTML head container.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Flask

Use pip to install the Flask Python package so that you can test the application locally.

pip install Flask

Include the Flask module in your Requirements.txt file.

Google App Engine (Standard Environment)

See Google's Using Cloud Storage documentation for using the default bucket for your App Engine application.

You will need to specify the Cloud Storage Bucket name in the app.yaml file.

You must include the google-cloud-storage module in your Requirements.txt file.

PyFPDF

Use pip to install the pyfpdf package so that you can test the application locally.

pip install fpdf

You must include the fpdf module in your Requirements.txt file.

SignaturePad

Include the signature_pad javascript file in your HTML head container.

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js">

Adding UTF-8 Support to PDF Files

See the PyFPDF Unicode documentation for details on adding UTF-8 support to PDF files.

Example:

1. Download a font file, e.g. the DejaVu package from SourceForge
2. Unpack the files and save your preferred .ttf file to the fonts directory in the source code tree
3. Specify the .ttf file in main.py

pdf.add_font("DejaVu", "", "fonts/DejaVuSansCondensed.ttf", uni=True)

When you run the application locally to test it the font file will be serialised by the Python Pickle module. This will result in the following files being created automatically.

• DejaVuSansCondensed.pkl
• DejaVuSansCondensed.cw127.pkl

These automatically generated Pickling files must be included when you deploy the application to GAE.

Testing

Use the Local Development Server to run the application locally.

dev_appserver.py \
--env_var GOOGLE_APPLICATION_CREDENTIALS="/Users/kevin/Development/gcp-credentials/credentials.json" \
--application=GAE-APP-ID

This depends on having a GCP service account with read/write permissions for the Cloud Storage Bucket. See Google's Getting started with authentication documentation for setting up a Service Account.

Requirements.txt

Specify the Python modules that must be loaded by Google App Engine.

# requirements.txt
Flask==1.1.2
fpdf==1.7.2
google-cloud-storage

Deploying

Deploy the application use the standard gcloud command.

gcloud app deploy --project=PROJECT_ID

Examples

• Screenshot of the HTML Form
• An example PDF File