DISCLAIMER for duplicate markers: this question is NOT about downloading a file. Please read the question before marking it as a duplicate.
I’m using embed to render a PDF file inside an HTML document. If I proceed as follows:
const embed = document.createElement("EMBED");
const url = "../pdf_files/test.pdf";
embed.src = url;
const content = document.getElementById("content");
content.innerHTML = "";
content.appendChild(embed);
the browser pdf viewer renders the document using the filename, as highlighted in the image below:
But if I use Blob/File/URL.createObjectURL, the pdf viewer does not use the file name:
const embed = document.createElement("EMBED");
const url = "../pdf_files/test.pdf";
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
const blob = new Blob([existingPdfBytes], {
type: 'application/pdf'
});
const file = new File([blob], "hello.pdf", {"type": "application/pdf"});
embed.src = window.URL.createObjectURL(file)
const content = document.getElementById("content");
content.innerHTML = "";
content.appendChild(embed);
Is there a way to set this file name in order to display it properly on the pdf viewer using URL.createObjectURL?