formUrl = http://localhost:3001/#/form/5bf494515dd4890698a96bc6/ (or json representation)

submissionData = http://localhost:3001/#/form/5bf494515dd4890698a96bc6/submission/5bf495b05dd4890698a96bca (or json representation)

toPdf: function(formUrl, submissionData, callback) {
    $.get(formUrl, function(formResponse) {
 
        var component = formResponse;
 
        var hasSubmission = submissionData !== null;
        var submission = hasSubmission ? submissionData : null;
        var emptyValue = hasSubmission ? 'n/a' : '';
 
        var willDownload = callback === null || callback === undefined;
 
        var options = {
            formio: { // component specific configuration
                ignoreLayout: true, // should html render respect formio layouts (columns, lables positions, etc)
                emptyValue: emptyValue // default empty value for rendered components
            },
            component: component,
            data: submission,
            config: { // pdf export configuration
                download: willDownload, // should the pdf file be downloaded once rendered
                filename: 'download.pdf', // the pdf file name
                margin: 10, // the pdf file margins
                html2canvas: {
                    scale: 5, // scale factor for rendering the canvas (overall resolution of the canvas image)
                    logging: false // should console logging be enable during rendering
                },
                jsPDF: {
                    orientation: 'p', // PDF orientation - potrait / landscape
                    unit: 'mm', // measurement units used
                    format: 'letter' // paper size - can also accept custom (i.e. A4 - [210, 297])
                }
            },
            meta: {
                generatedOn: moment().format('lll'),
                generatedBy: emailAddress
            }
        }
 
        var exporter = new FormioExport(component, submission, options);
 
        if (willDownload) {
            exporter.toPdf(options.config);
        } else if (callback) {
            exporter.toPdf(options.config).then(callback);
        }
    });
}

Formio Export Tools

This library is a plain JavaScript export tool for Form.io componets. This allows to export any Form.io component (with or without submission data) to PDF (other formats comming soon).

• Live Demo - Source
• Live Demo - Package

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installing

To install this package into your project, you can use the following command within your terminal

npm install --save formio-export

Usage

Creating a FormioExport instance

import FormioExport from 'formio-export';
 
let exporter = new FormioExport(component, data, options);

Using static methods

let options = {
  component: component,
  data: data,
  formio: {
    // component specific configuration
  },
  config: {
    // pdf export configuration
  }
};
 
FormioExport.toPdf(options).then((pdf) => {
  // do something
})

Configuration

The FormioExport instance can be initialized using the following configuration:

let options = {
  component: component    // the formio component
  data: data              // the formio component's data or submission
  formio: {
    ignoreLayout: true,   // should html render respect formio layouts (columns, lables positions, etc)
    emptyValue: 'n/a'     // default empty value for rendered components
  }
}

The PDF export is also configurable using the following parameters:

let config: {
  download: false,      // should the pdf file be downloaded once rendered
  filename: 'file.pdf', // the pdf file name
  margin: 10,           // the pdf file margins
  html2canvas: {
    scale: 2,           // scale factor for rendering the canvas (overall resolution of the canvas image)
    logging: false      // should console logging be enable during rendering
  },
  jsPDF: {
    orientation: 'p',   // PDF orientation - potrait / landscape
    unit: 'mm',         // measurement units used
    format: 'a4'        // paper size - can also accept custom (i.e. A4 - [210, 297])
  }
}

To get more information on PDF file configuration please read the following documentation:

• html2canvas - JavaScript html to canvas renderer library
• jsPDF - Client-sdie JavaScript PDF generator library

Simple Example

Using the FormioExport instance:

import FormioExport from 'formio-export';
 
let component = {
  type: 'form',
  title: 'Example',
  display: 'form',
  components: [
    {
      type: 'textfield',
      key: 'name',
      label: 'Name',
      input: true
    },
    {
      type: 'number',
      key: 'age',
      label: 'Age',
      input: true
    }
  ]
};
 
let submission = {
  _id: '<submission id>',
  owner: '<owner id>',
  modified: '1970-01-01T00:00:00.000Z',
  data: {
    name: 'John Doe',
    age: 25
  }
};
 
let options = {
  ignoreLayout: true
}
 
let exporter = new FormioExport(component, submission, options);
 
exporter.toHtml().then((html) => {
  document.body.appendChild(html);
});
 
let config = {
  download: false,
  filename: 'example.pdf'
};
 
exporter.toPdf(config).then((pdf) => {
  // download the pdf file
  pdf.save();
  // get the datauri string
  let datauri = pdf.output('datauristring');
})

Using the FormioExport static methods

let config = {
  component: component,
  data: submission,
  config
}

Building

Clone git repository:

git clone git@github.com:airarrazaval/formio-export.git

Install dependencies:

npm install

Build browser bundle

npm run build

Running the tests

Tests use samples provided in test/samples and should use Form.io's Component JSON Schema structure.

npm run test

NPM Packaging

Creating a public package and publish in https://npm.pkg.github.com/

• Through Github, create personal access token with publish rights (https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line), keep a copy of it or you have to regenerate again
• Login using the token (Note: username: $userid not email id [guru-aot], password: personal access token got from previous steps, Email: AOT email id)

npm login --registry=https://npm.pkg.github.com/

• First time, you have will get an Email, please verify it or while publishing it will ask you to verify.
• Rename the existing package.json to something and rename the publicPackagePublishJson.md to package.json
• Increase the version accordingly in the package.json
• Run the below command to publish

npm publish

• You can manually log into https://go.npm.me/login to check your published packages.

Creating a private package

• Rename existing backup.npmrc to .npmrc, run

ls -a

to view hidden files in shell

• Upgrade the version in package.json file
• Upgrade user to publish private packages, in https://www.npmjs.com and try

npm publish

• You can see the published packages in the corresponding github repositories

Built With

• js-html2pdf - Html to Pdf javascript library
• html2canvas - JavaScript html to canvas renderer library
• jsPDF - Client-sdie JavaScript PDF generator library