Use JavaScript to download a .png file on the server and create a new file with a different file extension (.pdf)

Question

My website's code is stored in a very cumbersome, crappy backend. Unfortunately, they lock the content header very tightly, any file link ending with .pdf will only be accessible via the UI download prompt, they don't allow in the browser ViewPDF files. My current thinking is that maybe I could upload the file to the server and rename it to file.pdf.png (this seems to allow it by satisfying the server content header condition to make it look like a .png file type The browser downloads the file into memory). I then want to be able to create a new file in JavaScript by making the file downloadable (In Memory). One approach proposed elsewhere is to base64 encode the content of the corrupted .png file, then create a new file in JavaScript based on the decoded base64 content and give it the .pdf extension name, the hope is that it will work as a PDF file and be stored in memory so users don't have to download anything to their device. The end goal is to retrieve the file in memory (from the user's backend) and display it using the browser's built-in PDF viewer.

//The server has the option to upload files //Assuming that what you upload is actually a PDF file, but with a .png extension appended to the end, //So links to these files will look like https://the-website.com/file.pdf.png

//Now I need to be able to retrieve this file in the background and hopefully have it in memory so the user doesn't have to interact with the UI download popup.

//Then, by some means, I need to extract the file content (file.pdf.png) and create a valid PDF file based on the file with a pseudo file extension, the resulting file should be file.pdf. This file needs to be stored in memory so that I can view it in a web page using something like or

Answer 1

The file extension actually doesn't have much to do with this... Content-TypeThe header does.

Based on your description, I'm guessing that when getting PDF files, the server is not using the correct type in the response, but instead sending them as application/octet-stream or other types. (This is a common type and browsers download them by default.)

There are several ways to solve this problem. One way is to use ServiceWorker to override the Content-Type header as needed. However, this doesn't always work. Browsers often disable service workers when a page is forced to reload or when privacy mode is enabled.

Another approach closer to what you propose is to get the PDF in memory in JavaScript. You can do this using the Fetch API, then create a Blob URL and let the browser download it. Not tested yet, but roughly this:

const res = await fetch('https://example.com/doc.pdf.fake-ext');
if (!res.ok) {
  throw new Error(`${res.status} ${res.statusText}`);
}

const blob = await res.blob();
const blobUrl = URL.createObjectURL(blob);

// 现在，您可以直接链接或重定向到`blobUrl`。
// 完成后一定要释放它，使用URL.revokeObjectURL()。

Please note that this may not work for particularly large documents. Small documents are no problem.

Also note that not all browsers can display PDF, and not all systems are configured to allow the browser to display PDF on its own.