Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
30
rated 0 times [  32] [ 2]  / answers: 1 / hits: 7027  / 4 Years ago, fri, july 31, 2020, 12:00:00

i am struggling to display the PDF in the browser, although i am getting Base64 code and using onlinetool(https://base64.guru/converter/decode/pdf) i can see the code convert into the correct PDF file that is stored in the backed.
After that i convert to blob Object and then it doesnt seems to open in the adobe reader when i click on the button.


// when the button is pressed, it will call the API to get the PDF document 

const headers = new Headers();
headers.append("content-type", "application/json");
headers.append("responseType", "arraybuffer");

const options = {
method: "POST",
headers,
credentials: "include",
body: JSON.stringify(invoice_Object),
// body: "My HTML String",
};

const newRequest = new Request("http://localhost:5000/api/invoice-only", options);

(async () => {
const invoice_Call = await fetch(newRequest)
.then((res) => {
return text1 = res.text();
})
.then((data) => {
generateFile(data, invoice_Name);// here data is the actual item that i am looking to display as PDF document
});
})();
};


  • Then it will open the PDF document in adobe reader, here the console content shows the correct Base64 code i think as seen when i use the code on online tool to convert to PDF document.
    So i am not sure if i am doing something wrong here generating the blob object and display as pdf.



let generateFile = (content, fileName) => {
console.log("content", content); // here at console if i copy the code and use online tool(https://base64.guru/converter/decode/pdf) it shows the correct pdf
const blob = new Blob([content], { type: "application/pdf" });
console.log(blob);
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
};



  • Backend code


     fs.readFile(`${__dirname}\` + `${Invoice_No_Actual}` + `.pdf`, (err, data) => {
if (err) res.status(500).send(err);
else {
res.contentType("application/pdf");
res.send(`data:application/pdf;base64,${new Buffer.from(data).toString("base64")}`);
}
});
}


  • BI have also uploaded the base64 code that i am getting when console logging at pastebin, https://pastebin.com/W4zEXyPy

  • Error when opening the PDF document after i click the button


enter


More From » adobe

 Answers
2

Your response type needs to be arraybuffer in order to create a blob out of it. Keep the content type of the blob as it is (application/pdf):


const headers = new Headers();
headers.append("content-type", "application/json");
headers.append("responseType", "arraybuffer");

Edit: Please see my comments down below, it seems like you are parsing invalid base64


[#3021] Tuesday, July 28, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
admin

Total Points: 468
Total Questions: 103
Total Answers: 103

Location: Equatorial Guinea
Member since Sun, Feb 14, 2021
3 Years ago
admin questions
Tue, Dec 29, 20, 00:00, 4 Years ago
Sun, Aug 16, 20, 00:00, 4 Years ago
Mon, Oct 14, 19, 00:00, 5 Years ago
Sun, Jun 16, 19, 00:00, 5 Years ago
Thu, Apr 11, 19, 00:00, 5 Years ago
;