Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
189
rated 0 times [  193] [ 4]  / answers: 1 / hits: 24979  / 6 Years ago, thu, august 23, 2018, 12:00:00

I'm trying to implement a PDF file download functionality with JavaScript.

As a response to a POST request I get a PDF file, in Chrome DevTools console it looks like (the oResult data container, fragment):



"%PDF-1.4↵%����↵4 0 obj↵<</Filter/FlateDecode/Length 986>>stream↵x��



Now I'm trying to initialize the download process:


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

let link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);
link.download = "tstPDF";

link.click();

As a result, upon a click on a button I get tstPDF.pdf, it contains the correct number of pages, but the PDF itself is empty, no content is displayed, although it is 6 KB.


When I test the Java server-side module, which generates the PDF, everything is working fine, it sends InputStream through ServletOutputStream. Thus I assume that the issue is somewhere on a client side, perhaps something with MIME, BLOB, encoding, or similar.


Why doesn't the generated PDF display any data?


More From » jquery

 Answers
28

I solved the issue.
The problem was in a way the data is delivered from the server to the client.
It is critical to assure that the server sends the data in Base64 encoding, otherwise the client side can't deserialize the PDF string back to the binary format. Below, you can find the full solution.



Server-side:



OutputStream pdfStream = PDFGenerator.pdfGenerate(data);

String pdfFileName = test_pdf;

// represent PDF as byteArray for further serialization
byte[] byteArray = ((java.io.ByteArrayOutputStream) pdfStream).toByteArray();

// serialize PDF to Base64
byte[] encodedBytes = java.util.Base64.getEncoder().encode(byteArray);

response.reset();
response.addHeader(Pragma, public);
response.addHeader(Cache-Control, max-age=0);
response.setHeader(Content-disposition, attachment;filename= + pdfFileName);
response.setContentType(application/pdf);

// avoid byte shaving by specifying precise length of transferred data
response.setContentLength(encodedBytes.length);

// send to output stream
ServletOutputStream servletOutputStream = response.getOutputStream();

servletOutputStream.write(encodedBytes);
servletOutputStream.flush();
servletOutputStream.close();


Client side:



let binaryString = window.atob(data);

let binaryLen = binaryString.length;

let bytes = new Uint8Array(binaryLen);

for (let i = 0; i < binaryLen; i++) {
let ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}

let blob = new Blob([bytes], {type: application/pdf});

let link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);
link.download = pdfFileName;

link.click();


Reference topics:




[#53665] Monday, August 20, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
estefanib

Total Points: 508
Total Questions: 104
Total Answers: 83

Location: Lebanon
Member since Sun, Aug 2, 2020
4 Years ago
;