Created
December 18, 2018 23:13
-
-
Save multinerd/a460d905ced59d87f6438c4890e924df to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formiojs@3.9.4/dist/formio.full.min.css"> | |
| </head> | |
| <body> | |
| <br/> | |
| <div class="container"> | |
| <button class="btn btn-primary" id="print"> Print </button> | |
| <div id="formio"></div> | |
| <div class="row"> | |
| <div class="col-sm-8 col-sm-offset-2"> | |
| <h3 class="text-center text-muted">Submission JSON</h3> | |
| <div class="well jsonviewer"> | |
| <pre id="subjson"></pre> | |
| </div> | |
| </div> | |
| <div class="clearfix"></div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/formiojs@3.9.4/dist/formio.full.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/formio-export@0.3.0/lib/formio-export.min.js"></script> | |
| <script> | |
| let loadSubmission = true; | |
| let component = { | |
| type: 'form', | |
| title: 'Example', | |
| display: 'form', | |
| components: [ | |
| { | |
| type: 'panel', | |
| legend: 'Contact Information', | |
| input: false, | |
| components: [ | |
| { | |
| type: 'textfield', | |
| key: 'name', | |
| label: 'Name', | |
| input: true | |
| }, | |
| { | |
| type: 'number', | |
| key: 'age', | |
| label: 'Age', | |
| input: true | |
| }, | |
| { | |
| type: 'select', | |
| label: 'Gender', | |
| input: true, | |
| key: 'gender', | |
| dataSrc: 'values', | |
| data: { | |
| values: [ | |
| { | |
| label: 'Female', | |
| value: 'f' | |
| }, | |
| { | |
| label: 'Male', | |
| value: 'm' | |
| }, | |
| { | |
| label: 'Other', | |
| value: 'o' | |
| } | |
| ] | |
| }, | |
| template: '<span>{{ item.label }}</span>', | |
| }, | |
| { | |
| type: 'columns', | |
| columns: [ | |
| { | |
| components: [ | |
| { | |
| type: 'email', | |
| label: 'Email', | |
| input: true, | |
| key: 'email' | |
| } | |
| ] | |
| }, | |
| { | |
| components: [ | |
| { | |
| type: 'phoneNumber', | |
| label: 'Phone', | |
| input: true, | |
| key: 'phone' | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| type: 'survey', | |
| key: 'feedback', | |
| label: 'Feedback', | |
| input: true, | |
| questions: [ | |
| { | |
| value: 'question1', | |
| label: 'How are you feeling today?' | |
| }, | |
| { | |
| value: 'question2', | |
| label: 'How would you rate the service provided so far?' | |
| } | |
| ], | |
| values: [ | |
| { | |
| value: '1', | |
| label: 'Terrible' | |
| }, | |
| { | |
| value: '2', | |
| label: 'Bad' | |
| }, | |
| { | |
| value: '3', | |
| label: 'Regular' | |
| }, | |
| { | |
| value: '4', | |
| label: 'Good' | |
| }, | |
| { | |
| value: '5', | |
| label: 'Excellent' | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| ] | |
| }; | |
| let submission = { | |
| _id: '<submission id>', | |
| owner: '<owner id>', | |
| modified: '1970-01-01T00:00:00.000Z', | |
| data: { | |
| name: 'John Doe', | |
| gender: 'm', | |
| email: 'john.doe@example.org', | |
| phone: '(555) 123-4567', | |
| feedback: { | |
| question1: "1", | |
| question2: "5" | |
| } | |
| } | |
| }; | |
| $(function () { | |
| var subJSON = document.getElementById('subjson'); | |
| Formio.createForm(document.getElementById('formio'), component).then(function (formio) { | |
| if (loadSubmission) { | |
| formio.submission = { | |
| data: submission.data | |
| }; | |
| } | |
| formio.on('change', function () { | |
| subJSON.innerHTML = ''; | |
| subJSON.appendChild(document.createTextNode(JSON.stringify(formio.submission, null, 4))); | |
| }); | |
| }); | |
| $('#print').on('click', function (e) { | |
| 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'); | |
| }) | |
| }); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
IIRC, it had something to do with the way the files were packaged. I had no luck with contacting the original developer so i ended up forking my own which can be found here https://github.com/multinerd/formio-export
In the readme, i have an example of how its used.
I dont remember if i got the npm package to work but you can give that a try: https://www.npmjs.com/package/@multinerd/formio-export
Note: I dont plan on maintaining this fork or bring in any improvements. If you do, i recommened you do PRs to the original repo
https://github.com/fast-platform/fast-export
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yup, sorry...this issue
Also getting an error that "FormioExport is not defined"