You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
5.9 KiB
170 lines
5.9 KiB
<!DOCTYPE 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.3.9.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 = {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>
|