Print single or multiple files with Print.js and PDF.js

Ever wondered if we can print almost every format file through our JS code.

Not only just printing, we can also merge multiple pdf files & save them in one single PDF file.

Yes you heard it right!! Here we will see how easy it is to support printing of multiple pdf files or save multiple pdf files in one single PDF file through javascript.

To achieve this task we need two JS libraries:

  1. Print.js: https://printjs.crabbly.com/ 
  2. Pdf.js: https://mozilla.github.io/pdf.js/

First, add both library’s CDN in your index.html file

<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css" />

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.js"></script>

We will perform printing in different categories:

  1. Print single PDF file
  2. Print Multiple Images
  3. Print HTML Content
  4. Merge different PDF file & save or print as one single PDF file

Print single PDF file

To print single pdf file. We don’t need PDF.js. It can be done with Print.js i.e. we can use global ‘printJS’ method which can accept both pdf file Url or base64 pdf data.

 printJS({
    printable: sampleBase64pdf,
    type: 'pdf',
    base64: true,
  });

Print Multiple Images

Print multiple images with Print.js is very easy. All you need to do is to pass your image file Urls in printable key in array in printJS method

  printJS({
    printable: sampleMultipleJPGs,
    type: 'image',
  });

Print HTML Content

  printJS({
    printable: sampleHtmlContent,
    type: 'raw-html',
  });

For printing HTML content all you need is valid html code and pass it in printJS method

Merge different PDF file & save or print as one single PDF file

Now comes the most interesting part i.e. to merge multiple pdf files and then provide option to either save or print one single file. We need PDF.js here to convert multiple base64 PDF files to multiple base64 PNG files. Iterate all base64 PDF files and continuously add in one variable multiple base64 PNG files.

    pdf.getPage(currentPage).then((page) => {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale });

      // Prepare canvas using PDF page dimensions
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };

      page
        .render(renderContext)
        .promise.then(() => {
          resolve(canvas.toDataURL()); // Returns the content of the current canvas as an image
        })
        .catch((error) => {
          reject(error);
        });
    });

So far we have all our base64 PNG files. Now only thing left to do is to merge them and save or print them as single PDF file. With the help of PDF.js here i.e. render multiple base64 PNG files in image tag in one HTML file and print it in one single PDF file. Once print popup opens then we can simply either print or save pdf file.

// Merge different PDF file & save or print as one single PDF file  
getMultiplePngImagesWithImgTag().then((multiplePngImagesWithImgTag) => {
    // Now we have all converted base64 PNGs in image tag and we are ready to render them as html content to print as one single file with Print JS
    printJS({
      printable: multiplePngImagesWithImgTag,
      type: 'raw-html',
      base64: false,
    });
  });

We can check how we can achieve results for all above categories via https://stackblitz.com/edit/js-yp4nmr?file=index.html

So these are one of the few things we can achieve with these two libraries. We can even print Json data or render multiple pages of multiple PDF files independently to convert each page of PDF in PNG and perform action as per requirement. To explore more follow their documentation.

Reference:

  1. Print.js: https://printjs.crabbly.com/
  2. PDF.js: https://mozilla.github.io/pdf.js/

Finding this helpful?

If you need any additional details in this regard then feel free to chat with our live agent at impledge.com

Thank you !!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s