# Formio Export Tools

![GitHub package version](https://img.shields.io/github/package-json/v/airarrazaval/formio-export.svg) 
![npm (tag)](https://img.shields.io/npm/v/formio-export/latest.svg)


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](https://stackblitz.com/edit/formio-export)
* [Live Demo - Package](https://stackblitz.com/edit/formio-export-npm)

## 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

```javascript
import FormioExport from 'formio-export';

let exporter = new FormioExport(component, data, options);
```

Using static methods
```javascript
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:

```javascript
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:

```javascript
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](http://html2canvas.hertzen.com/configuration) - JavaScript html to canvas renderer library
* [jsPDF](https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) - Client-sdie JavaScript PDF generator library

# Simple Example

Using the FormioExport instance:

```javascript
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

```javascript
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](https://github.com/formio/formio.js/wiki/Components-JSON-Schema) structure.

```
npm run test
```

## Built With

* [js-html2pdf](https://github.com/airarrazaval/html2pdf) - Html to Pdf javascript library
* [html2canvas](http://html2canvas.hertzen.com) - JavaScript html to canvas renderer library
* [jsPDF](https://github.com/MrRio/jsPDF) - Client-sdie JavaScript PDF generator library

## Authors

* **Alfredo Irarrazaval** - *Initial work* - [airarrazaval](https://github.com/airarrazaval)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details