JSFiddle - React, Tailwind, and code Playground

by Liam Merlyn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<form>
  <div>
    <label for="orderNumber">Order Number</label>
    <input type="text" name="" placeholder="1707983929421" id="orderNumber" required>
  </div>
  <button type="submit" id="generate">Download PDF</button>
</form>
<canvas id="the-canvas"></canvas>

CSS

body {
  font-family: Arial;
}

label {
  display: block;
}

div {
  margin-bottom: 25px;
}

input[type="text"] {
  padding: 5px 10px;
  width: 250px;
  margin-top: 5px;
}

button {
  margin-bottom: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 20px 25px;
  width: fit-content;
  max-width: 100%;
  line-height: 1;
  font-family: $font-body;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  user-select: none;
  appearance: none;
  outline-color: transparent;
  border: 0;
  background-color: #1e2c48;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease-in, color .2s ease-in, opacity .2s ease-in;
}


#the-canvas {
  border: 1px solid black;
  max-width: 100%;
}

Babel + JSX

// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
function generatePdf(orderNumber) {
  axios.post('https://nourished.uwp.agency/api/recommendation-sheet', {
    orderNumber: orderNumber // 1707983929421
  }).then(res => {

    var pdfData = atob(res.data.pdf)
    var len = pdfData.length;
    var buffer = new ArrayBuffer(len);
    var view = new Uint8Array(buffer);
    for (var i = 0; i < len; i++) {
      view[i] = pdfData.charCodeAt(i);
    }

    // create the blob object with content-type "application/pdf"               
    var blob = new Blob([view], {
      type: "application/pdf"
    });
    saveAs(blob, `${res.data.orderNumber}.pdf`);


    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var pdfjsLib = window['pdfjs-dist/build/pdf'];

    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

    // Using DocumentInitParameters object to load binary data.
    var loadingTask = pdfjsLib.getDocument({
      data: pdfData
    });
    loadingTask.promise.then(function(pdf) {
      console.log('PDF loaded');

      // Fetch the first page
      var pageNumber = 1;
      pdf.getPage(pageNumber).then(function(page) {
        console.log('Page loaded');

        var scale = 1.5;
        var viewport = page.getViewport({
          scale: scale
        });

        // Prepare canvas using PDF page dimensions
        var canvas = document.getElementById('the-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
        };
        var renderTask = page.render(renderContext);
       ...