How to convert PDF file to HTML using by pdf2htmlEX on Windows OS
1. Go to pdf2htmlEX home page then click download the latest version.
2. Extract zip files
3. Go to “pdf2htmlEX” folder and then go to “data” folder.
4. Create formbuilder_pdf.css and formbuilder_pdf.js files and then copy code below to the new files.
Css code for formbuilder_pdf.css:
.pretty *{box-sizing:border-box}.pretty
input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inlineblock;margin-right:1em;white-space:nowrap;line-height:1}.pretty
input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;zindex:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inlineblock;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state
label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em +
2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;zindex:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty
.state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-isindeterminate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkittransform:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkittransform:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-animation-timingfunction:ease-in;animation-timing-function:ease-in;opacity:0;-webkittransform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animationtiming-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkitanimation-timing-function:ease-in;animation-timing-function:ease-in;-webkittransform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animationtiming-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timingfunction:ease-in;animation-timing-function:ease-in;-webkittransform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:easeout;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkitanimation-timing-function:ease-in;animation-timing-function:ease-in;-webkittransform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:easeout;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@keyframes
tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:easeout;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkittransform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animationtiming-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timingfunction:ease-in;animation-timing-function:ease-in;-webkittransform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:easeout;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkitanimation-timing-function:ease-in;animation-timing-function:ease-in;-webkittransform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:easeout;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@-webkitkeyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkittransform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkittransform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkittransform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkittransform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkittransform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkittransform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-
JS code for formbuilder_pdf.js:
/**
The MIT License
Copyright (c) 2010 Daniel Park (http://metaweb.com, http://postmessage.freebaseapps.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
**/
var NO_JQUERY = {};
(function(window, $, undefined) {
if (!("console" in window)) {
var c = window.console = {};
c.log = c.warn = c.error = c.debug = function(){};
Follow these links to copy codes: rio-wap-fbd\stat\v1\src\forms\editor\v1\pdf2htmlEX\source
5. Open manifest file in “data” folder.
-
Add tag before and add files name
behind the close tag “
”, save and close file.
"""
@formbuilder_pdf.css
@formbuilder_pdf.js
"""
6. Go to “pdf2htmlEx” folder, press and hold the shift key, then press the right mouse button at the background of
the Explorer window and click on “Open command window here”.
7.
Use command pdf2htmlEX path/file.pdf outputpath/file.html
Example
The finished file after being converted.
The html file shows up in the output path
How to use PDF html file in Formbuilder
1.
Open “Formbuilder” project and then change display as to “PDF”
2. Click “Definition” tab
3. Look at “setting” object and then change the path of pdf html file at “src” object
"settings": {
"pdf": {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
"src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a84726f67b67d6f0"
}
},
"settings": {
"pdf": {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
"src": “https://your_part_to_folder/tog_sample"
}
},
Note:
Remove “.html” at the end of path before place it in the json code
Example file:
http://fbd-pdf.azurewebsites.net/tog_sample.html
4. After putting the path of PDF html, click on “Edit” tab. The PDF html file will be shown.
How to convert PDF to HTML file using by pdf2htmlEX on MAC OS
1. Open “Terminal” and then install homebrew first with command
mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C
homebrew
2. Install pdf2htmlEX with command
brew install pdf2htmlEX
3. Press “Command + Shift + G” and then go to “usr/local/Cellar/pdf2htmlex/0.14.6_20/share/pdf2htmlEx”
folder
4. Open manifest file with text editor
5. Add
tag before
and add files name
behind the close tag “” then save and close file.
"""
@formbuilder_pdf.css
@formbuilder_pdf.js
"""
5. Create “formbuilder_pdf.css” and “formbuilder_pdf.js” files in “pdf2htmlEX” folder and then copy codes
below to the new files
Css code for formbuilder_pdf.css:
.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty
.state label:before{content:'';width:calc(1em + 2px);height:calc(1em +
2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid
transparent;z-index:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) 8%);background-color:transparent}.pretty .state label:before{bordercolor:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timingfunction:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:easein;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timingfunction:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:easein;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animationtiming-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@keyframes tada{0%{-webkit-animation-timing-function:easein;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:easeout;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:easein;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timingfunction:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:easein;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animationtiming-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@webkit-keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-trans-
JS code for formbuilder_pdf.js:
/**
The MIT License
Copyright (c) 2010 Daniel Park (http://metaweb.com, http://postmessage.freebaseapps.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
**/
var NO_JQUERY = {};
(function(window, $, undefined) {
if (!("console" in window)) {
var c = window.console = {};
c.log = c.warn = c.error = c.debug = function(){};
}
if ($ === NO_JQUERY) {
// jQuery is optional
$ = {
fn: {},
extend: function() {
var a = arguments[0];
for (var i=1,len=arguments.length; i tag and then save file.
Example:
3. Open “Formbuilder” project and then change display as to “PDF”
4. Click “Definition” tab
5. Look at “setting” object and then change the path of pdf html file at “src” object
"settings": {
"pdf": {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
"src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a84726f67b67d6f0"
}
},
6. Putting the path of normal html file
"settings": {
"pdf": {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
"src": “Path of normal html file"
}
},
Note:
Remove “.html” at the end of path before place it in the json code
Example:
file:///C:/Users/sukanya/Downloads/pdf_data
7. After putting the path of PDF html, click on “Edit” tab. The normal html file will be shown.
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.7
Linearized : No
Page Count : 18
Language : en-US
Tagged PDF : Yes
XMP Toolkit : 3.1-701
Producer : Microsoft® Word 2016
Creator : Sukmuang Setthawut
Creator Tool : Microsoft® Word 2016
Create Date : 2018:10:16 17:01:13+07:00
Modify Date : 2018:10:16 17:01:13+07:00
Document ID : uuid:948820FE-2342-49AA-8332-06287B8D83A7
Instance ID : uuid:948820FE-2342-49AA-8332-06287B8D83A7
Author : Sukmuang Setthawut