html-to-pdfmake
Version:
Convert HTML code to PDFMake
79 lines (77 loc) • 2.81 kB
HTML
<html>
<head>
<title>HTML to PDFmake online convertor</title>
<style>
.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;
}
</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>
</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="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:</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>
</div>
<script src="browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.57/build/pdfmake.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.57/build/vfs_fonts.js"></script>
<script>
var codeBag = document.querySelector('#code');
function convert () {
var val = htmlToPdfmake(code.value);
document.querySelector('#result').value = JSON.stringify(val, null, ' ');
var dd = {content:val};
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>