Pdfkit displaying and download pdf

Ask the community
,
1

I have seen a number of posts on this but most were just asking how to use it but didn’t get any feedback. I have gotten pdfkit mostly working and am able to generate a blobstream that I can display on a click. However you can’t download the document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<input type="button" id = "dload" onclick="location.href='';" value="Download Shopping List" />
 <script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
  <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js">

    </script>
</head>
<body>
<script>
function getDataUri(url, callback) {
  var image = new Image();

  image.crossOrigin = 'anonymous'
  image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

    canvas.getContext('2d').drawImage(this, 0, 0);

    // // Get raw image data
    // callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

    // ... or get as Data URI
    callback(canvas.toDataURL('image/png'));
  };

  image.src = url;
}

// Usage 
getDataUri('https://static.wixstatic.com/media/270293_3c4438cf1b4a457696558532e788c7f8~mv2.jpeg', function(dataUri) {
  // create a document and pipe to a blob
  var doc = new PDFDocument();
  var stream = doc.pipe(blobStream());

  doc.image(dataUri, 0, 0, {width:620,height:800});
  doc.font('Helvetica')
  doc.fontSize(20)
  doc.text('Your Shopping List',200,20)
  doc.list(['2 medium Carrots','3 apples','250g broccoli'],50,50)

  // end and display the document in the iframe to the right
  doc.end();
stream.on('finish', function() {

//HERE IS MY QUESTION

  document.getElementById("dload").onclick = function(){location.href = stream.toBlobURL('application/pdf')}; 
  //window.open(stream.toBlobURL('application/pdf'), '_blank');
  window.src = stream.toBlobURL('application/pdf')

Ignore all the document stuff, it is working, although not as cleanly as I would like. It is quite difficult to just add an image using the browser version of pdfkit but that isn’t a wix question.

The issue I have is rendering and downloading the pdf.
the stream.toBlobURL(‘application/pdf’) works completely I think. When I attach the blob URL to the download button it appears in the frame and I see all the standard pdf functions such as search, download, print etc… they all work except download which I get a network failed error.

The normal way it seems to render the pdf is simply just saying

 iframe.src = stream.toBlobURL('application/pdf')

but iframe is not defined in wix which is why I just tried setting the entire window.src but that doesn’t work either. Is there some way to get this to display correctly? Even better would be if I could just have a download link and not even show it. I tried posting a message with the blob url back to the main page code, I passed the information but a button link can’t be set to this type of URL so that didn’t work.

2

So I got this working but not in an ideal way. It seems you can’t set the src of an iframe in wix to a blob URL

<html>
  <head>
  <script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
  <script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
    
    <script type="text/javascript">
    window.onmessage = (event) => {
        if (event.data) {
            // create a document and pipe to a blob
            var doc = new PDFDocument();
            var stream = doc.pipe(blobStream());
            doc.font('Helvetica');
              doc.fontSize(20);
              doc.text('Some Text',200,20);              

              // end and display the document in the iframe to the right
              doc.end();
            stream.on('finish', function() {
                const blob = stream.toBlob('application/pdf')
                const a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = "YourFileName";
                a.style.position = 'fixed';
                a.target = '_blank';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
      };
    };
    </script>
  </head>  
  <body>
  </body>
</html>

and then my page code is just to trigger the event so the download doesn’t happen automatically.

export function button1_click(event) {
$w(‘#html1’).postMessage(“blank”)
}

I removed all the extra stuff I am doing and just added a very simple bit of text into the pdf. But it works now without the display of the pdf which I could handle by using my old method except for the fact that I think people would expect to download from that iframe and it won’t work. So it would be nice if the src of the iframe could be set in wix so this works