PDF is corrupted after reconstructing it using URL.createObjectURL

Question

I'm trying to pass a PDF file from the server and display it inside the browser, but the output comes out corrupted.

var blob = atob(data.Package);

console.log(blob);

var file = new Blob([blob], { type: "application/pdf" });

const fileURL = URL.createObjectURL(file);

window.open(fileURL);

Console log outputs something that appears to be correct PDF (just the beginning of output):

I'm saving a copy of the PDF on the server before transfer to make sure it is not corrupt and it works.

URL constructed with URL.createObjectURL(file) seems to be short: blob:http://localhost:61631/ad749684-2992-4311-8b17-f382a7c687be

server side code:

Object doc = Convert.ToBase64String(_Document.DocumentStream.ToArray());
JObject response = new JObject(new JProperty("Package", JObject.FromObject(doc)));
return new AspResponse<Object>(response);

What do you mean by "URL constructed with URL.createObjectURL(file) seems to be short"? What do you see when you go to the object url? — jtate, Nov 09 '18 at 20:35
when the url opens i see a blank page with some artifact in a middle — AnKing, Nov 09 '18 at 20:45

score 3 · Accepted Answer · answered Nov 09 '18 at 20:59

It looks like the issue is because you need to convert the PDF data into an actual byte array, then pass that into the Blob constructor. Try this:

function convertToByteArray(input) {
  var sliceSize = 512;
  var bytes = [];

  for (var offset = 0; offset < input.length; offset += sliceSize) {
    var slice = input.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);

    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    bytes.push(byteArray);
  }

  return bytes;
}

var blob = atob(data.Package);

console.log(blob);

var file = new Blob(convertToByteArray(blob), { type: "application/pdf" });

const fileURL = URL.createObjectURL(file);

window.open(fileURL);

I'm having the same issue but this did not work for me – Agent Pants Jan 30 '20 at 19:09 — Agent Pants, Jan 30 '20 at 19:09

score -1 · Answer 2 · answered Jul 22 '22 at 11:02

-1

This solution worked for me, basically generating the pdf as a base64 string in the backend and rendering the content in an anchor tag for downloading the pdf file.

https://kainikhil.medium.com/nodejs-how-to-generate-and-properly-serve-pdf-6835737d118e

answered Jul 22 '22 at 11:02

Francisco Javier Peña Veitia

19
5

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32309339) – ahuemmer Jul 26 '22 at 06:34
Is hilarious how you guys can undermine hours of searching and try to help other people. – Francisco Javier Peña Veitia Jul 27 '22 at 07:04
We _do_ appreciate your efforts. But please imagine what happens, e. g. when the link you posted gets invalid after some time. Your solution will not be usable by anyone have the same problem any more and your search would have been useless. That's part of why we ask people no to post link-only answers. – ahuemmer Jul 27 '22 at 07:17

PDF is corrupted after reconstructing it using URL.createObjectURL

2 Answers2

Linked