Javascript pdfjs-dist Example to Add Base64 Image as Watermark in PDF Document Using EasyPDF-io Library in Browser
<html>
<head>
<!-- Only include when rendering is required -->
<script src="https://unpkg.com/pdfjs-dist/build/pdf.min.js"></script>
<script src="https://unpkg.com/pdfjs-dist/build/pdf.worker.min.js"></script>
<script src="https://unpkg.com/easypdf-io/dist/easypdf-io.min.js"></script>
<!-- Include pdfjs version 2.3.200 for Internet Explorer compatibility, no worker required -->
<!-- <script src="https://unpkg.com/pdfjs-dist@2.3.200/build/pdf.min.js"></script> -->
</head>
<style>
#pdf {
text-align: center;
}
#pdf canvas {
border: 1px solid black;
width: 95%;
}
</style>
<body>
<button onclick="createPDF()">Create PDF</button>
<button onclick="downloadPDF()">Download PDF</button>
<button onclick="renderPDF()">Render PDF</button>
<p>PDF as base64 (click create pdf):
<small id="pdfBase64"></small>
</p>
<div id="pdf"></div>
</body>
<script>
function createPDF() {
var data = getSampleData();
console.log(data)
easypdf.create(data, function(result) {
console.log(result);
document.getElementById('pdfBase64').innerText = result.pdf;
/* console.log(result.pdf); */
});
}
function downloadPDF() {
var data = getSampleData();
easypdf.create(data, function(result) {
easypdf.download('sample.pdf', result.pdf);
// you can download like this as well:
// easypdf.download();
// easypdf.download('sample.pdf');
});
}
function renderPDF() {
var data = getSampleData();
document.getElementById("pdf").innerHTML = "loading...";
easypdf.create(data, function(result) {
easypdf.render('pdf', result.pdf);
});
}
function getSampleData() {
var html = '<p>Hello world!</p>';
return {
// Base64 encode html
html: btoa(html),
background: 'https://public.easyinvoice.cloud/img/watermark-draft.jpg',
settings: {
// "margin-top": 25, // Default to 25
// "margin-right": 25, // Default to 25
// "margin-left": 25, // Default to 25
// "margin-bottom": 25, // Default to 25
// "format": "Letter" // Defaults to A4
}
};
}
</script>
</html>
