html-to-pdfmake
Version:
Convert HTML code to PDFMake
171 lines (166 loc) • 6.09 kB
HTML
<html>
<head>
<title>HTML to PDFmake online convertor</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: Roboto
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor:pointer;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover {
box-shadow: none;
}
.error {
color:red;
}
/* html-to-pdfmake default style */
p {
margin:5pt 0 10pt 0;
}
ul {
margin-bottom:5pt;
margin-left:5pt;
}
table {
margin-bottom:5pt;
border-collapse: collapse;
}
th {
font-weight:bold;
background-color:#EEEEEE
}
th, td {
border:1px solid black;
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<h1>HTML to PDFMake convertor</h1>
<p><a href="https://github.com/Aymkdn/html-to-pdfmake">Read the documentation</a></p>
<p>Paste your HTML code below and click on the button to convert it to the <a href="http://pdfmake.org/">PDFmake</a> format:</p>
<div style="display:flex;height:35vh">
<div style="flex:1;display:flex;flex-direction:column;">
<b>Your HTML code here:</b>
<textarea style="height:100%" id="code" onkeyup="toHTML()">
<div>
<h1>My title</h1>
<p>
This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,
and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.
</p>
<table>
<tr>
<th style="width:150px">Header 1</th>
</tr>
<tr>
<td style="text-align:center" height="50">Cell A1</td>
</tr>
</table>
<span class="green">Text in green using the styles from PDFMake</span>
</div>
</textarea>
</div>
<div style="flex:1;display:flex;flex-direction:column;">
<b>HTML Preview:</b>
<div style="padding:5px;border:2px solid #CCC;height:100%; overflow: auto" id="html"></div>
</div>
</div>
<div style="display:flex;height:15vh">
<div style="flex:1;display:flex;flex-direction:column;">
<b><a href="https://pdfmake.github.io/docs/document-definition-object/styling/">Styles</a> for PDFMake:</b>
<div class="error" id="styles_error" style="display:none"></div>
<textarea style="height:100%" id="styles">
{
"green": {
"color": "green"
}
}
</textarea>
</div>
<div style="flex:1;display:flex;flex-direction:column;">
<b>htmlToPdfmake <a href="https://github.com/Aymkdn/html-to-pdfmake#options">options</a>:</b>
<div class="error" id="options_error" style="display:none"></div>
<textarea style="height:100%" id="options">
{
"tableAutoSize":true
}
</textarea>
</div>
</div>
<div style="text-align:center;font-size:18px;margin-top:10px"><button type="button" onclick="convert()" class="button">Generate PDF</button></div>
<div style="display:flex;height:40vh;margin-top:1em">
<div style="flex:1;display:flex;flex-direction:column;">
<b>Result that can directly be copied in <a href="http://pdfmake.org/playground.html">PDFMake Playground</a>:</b>
<textarea id="result" style="height:100%"></textarea>
</div>
<div style="flex:1;display:flex;flex-direction:column;">
<b>PDF:</b>
<iframe id="pdf" style="height:100%"></iframe>
<div id="pdf_ie" style="display:none;padding:3em">The PDF file is sent to you for download. Use a modern browser (like Chrome or Firefox) to display the PDF in this page.</div>
</div>
</div>
<script src="browser-2.5.33.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.js"></script>
<script>
var codeBag = document.querySelector('#code');
function convert () {
var errorStyles = document.querySelector('#styles_error');
var errorOptions = document.querySelector('#options_error');
// hide errors
errorStyles.style.display="none";
errorOptions.style.display="none";
// retrieve options
try {
var p = document.querySelector('#options').value.trim() || '{}';
var options = JSON.parse(document.querySelector('#options').value.trim() || '{}');
} catch(err) {
errorOptions.style.display='block';
errorOptions.innerHTML = err;
}
// retrieve styles
try {
var styles = JSON.parse(document.querySelector('#styles').value.trim() || '{}');
} catch(err) {
errorStyles.style.display='block';
errorStyles.innerHTML = err;
}
var val = htmlToPdfmake(code.value, options);
var dd = (typeof val.content !== "undefined" ? val : {content:val});
if (typeof styles === 'object') dd.styles = styles;
document.querySelector('#result').value = "var dd = " + JSON.stringify(dd, null, ' ');
// is IE ?
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
if (isIE) {
document.getElementById('pdf').style.display='none';
document.getElementById('pdf_ie').style.display='block';
pdfMake.createPdf(dd).download();
} else {
pdfMake.createPdf(dd).getDataUrl(function(outDoc) {
document.getElementById('pdf').src = outDoc;
});
}
}
convert();
var htmlBag = document.querySelector('#html');
function toHTML() {
htmlBag.innerHTML = codeBag.value;
}
toHTML();
</script>
</body>
</html>