Pdf2HTML Manual

pdf2HTML-Manual

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 18

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: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{border-color:#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-timing-function:ease-out;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;-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-timing-function:ease-
out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-
animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-
transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-
out;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:ease-
out;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;-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-timing-function:ease-
out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-
animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-
transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-
out;animation-timing-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-
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 <div id=”pdf-form”></div> tag before <div class=”loading-indicator”></div> and add files name
behind the close tag “</body>”, 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-a847-
26f67b67d6f0"
}
},
"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 <div id=”pdf-form”></div> tag before <div class=”loading-indicator”></div> and add files name
behind the close tag “</body>” 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=check-
box]):not([type=radio]){display:none}.pretty{position:relative;display:in-
line-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty in-
put{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-in-
dex:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{posi-
tion:initial;display:inline-block;font-weight:400;margin:0;text-in-
dent: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{border-
color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indetermi-
nate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkit-trans-
form:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkit-trans-
form:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-anima-
tion-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-
webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-
function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-trans-
form:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-
in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);trans-
form:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-tim-
ing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-web-
kit-animation-timing-function:ease-in;animation-timing-function:ease-in;-web-
kit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-
function:ease-out;animation-timing-function:ease-out;-webkit-trans-
form:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-
in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);trans-
form:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-
timing-function:ease-out;-webkit-transform:scale(1);trans-
form:scale(1)}}@keyframes tada{0%{-webkit-animation-timing-function:ease-
in;animation-timing-function:ease-in;opacity:0;-webkit-trans-
form:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-
out;animation-timing-function:ease-out;opacity:1;-webkit-trans-
form:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-
in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);trans-
form:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-tim-
ing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-web-
kit-animation-timing-function:ease-in;animation-timing-function:ease-in;-web-
kit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-
function:ease-out;animation-timing-function:ease-out;-webkit-trans-
form:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-
in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);trans-
form:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-
timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@-
webkit-keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);trans-
form:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);trans-
form:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);trans-
form:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);trans-
form:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);trans-
form:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);trans-
form:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);trans-
form:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-trans-
form:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-trans-
form:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-trans-
form:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-trans-
form: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.free-
baseapps.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<len; i++) {
var b = arguments[i];
for (var prop in b) {
a[prop] = b[prop];
}
}
return a;
}
};
}
$.fn.pm = function() {
console.log("usage: \nto send: $.pm(options)\nto receive:
$.pm.bind(type, fn, [origin])");
return this;
};
7. Open “Terminal” and go to “pdf2htmlEX” folder and then use command pdf2htmlEX path/file.pdf for
converting
Example
pdf2htmlEX tog_sample_macos.pdf
8. The PDF HTML file will be shown in this folder.
How to use local 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-a847-
26f67b67d6f0"
}
},
4. Putting the path from your machine
"settings": {
"pdf": {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
"src": “Path html file from your machine"
}
},
Note:
Remove “.html” at the end of path before place it in the json code
Example:
file:///C:/Users/sukanya/Downloads/pdf2htmlEX-win32-0.14.6-upx-with-poppler-data/output/calender
5. After putting the path of PDF html, click on “Edit” tab. The PDF html file will be shown.
How to use normal html file in Formbuilder
1. Open sample.html file and then find keyword “content-area=”html””
Follow these links to copy sample.html file: rio-wap-fbd\stat\v1\src\forms\editor\v1\pdf2htmlEX\src
2. Copy html content to below of <div content-area=”html”> 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-a847-
26f67b67d6f0"
}
},
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.

Navigation menu