JSFiddle - React, Tailwind, and code Playground

by Bryan Weaver

HTML

<script src="https://github.com/devongovett/pdfkit/releases/download/v0.8.0/pdfkit.js"></script>
    <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>

JavaScript

var filesLoaded = 0;
      
      var files = {
        img1: {
          url: 'https://pdfkit.org/docs/images/test.jpeg',
        },
        img2: {
          url: 'https://pbs.twimg.com/profile_images/519367942866104320/PB96rDH_.png',
        },
        img3: {
          url: 'https://img.freepik.com/free-icon/github-character-silhouette_318-40485.jpg?size=338&ext=jpg',
        },

      };

      var doc = new PDFDocument({
        layout: 'landscape',
        size:[311.83,595.28],
        margins: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }});
      var stream = doc.pipe(blobStream());
  
      function loadedFile(xhr) {
        for (var file in files) {
          if (files[file].url === xhr.responseURL) {
            files[file].data = xhr.response;
          }
        }
        filesLoaded += 1;
        if (filesLoaded == Object.keys(files).length) {
          showPDF();
        }
      }
      
      for (var file in files) {
        files[file].xhr = new XMLHttpRequest();
        files[file].xhr.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            loadedFile(this);
          }     
        };
        files[file].xhr.responseType = 'arraybuffer';
        files[file].xhr.open('GET', files[file].url);
        files[file].xhr.send(null); 
      }
        
      function showPDF() {
        doc.rect(10, 10, 430, 20).fill('#000000');
        doc.rect(450, 10, 135, 20).fill('#000000');

        doc.moveTo(10, 180).lineTo(430, 180).stroke();
        doc.moveTo(10, 240).lineTo(310, 240).stroke();
        doc.moveTo(10, 280).lineTo(310, 280).stroke();
        doc.moveTo(445, 10).lineTo(445, 300).dash(5).stroke();

        //obrazki
        doc.image(files.img1.data, 455, 80, {fit: [80, 80]});
        doc.image(files.img2.data, 455, 200, {fit: [80, 80]});        
        doc.image(files.img3.data, 350, 200, {fit: [80, 80]});


        doc.fontSize(17);
       ...