Javascript Pdfjs-Dist Example to Add base64 Image as Watermark in PDF Document Using Easypdf-IO Library in Browser

You are currently viewing Javascript Pdfjs-Dist Example to Add base64 Image as Watermark in PDF Document Using Easypdf-IO Library in Browser

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>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply