使用JavaScript下载服务器上的.png文件并创建一个带有不同文件扩展名（.pdf）的新文件

Question

我的网站的代码存储在一个非常麻烦、糟糕的后端中。不幸的是，他们将内容头锁定得非常严格，任何以.pdf结尾的文件链接都只能通过UI下载提示来访问，他们不允许在浏览器中查看PDF文件。 我现在的想法是，也许我可以将文件上传到服务器，并将其重命名为file.pdf.png（这似乎可以通过满足服务器内容头条件，使其看起来像是.png文件类型，从而允许浏览器将文件下载到内存中）。然后，我希望通过将文件设置为可下载（在内存中），可以在JavaScript中创建一个新文件。其他地方提出的一种方法是，将损坏的.png文件的内容进行base64编码，然后根据解码后的base64内容在JavaScript中创建一个新文件，并给它.pdf扩展名，希望它能够A作为PDF文件工作，并且B在内存中存储，这样用户就不必下载任何东西到他们的设备上。最终目标是在内存中检索文件（从用户的后台）并使用浏览器的内置PDF查看器进行显示。

//服务器有上传文件的选项 //假设您上传的实际上是一个PDF文件，但在末尾附加了.png扩展名， //所以链接到这些文件的链接看起来像是https://the-website.com/file.pdf.png

//现在我需要能够在后台检索此文件，希望它在内存中，这样用户就不必与UI下载弹出框进行交互。

//然后，通过某种方式，我需要提取文件内容（file.pdf.png），并创建一个基于具有伪文件扩展名的文件的有效PDF文件，结果文件应该是file.pdf。这个文件需要存储在内存中，这样我就可以在网页中使用像或

Answer 1

文件扩展名实际上与此并没有太多关系... Content-Type头部才有关系。

根据您的描述，我猜测当获取PDF文件时，服务器在响应中没有使用正确的类型，而是发送它们作为application/octet-stream或其他类型。（这是一种通用类型，浏览器默认会下载它们。）

有几种方法可以解决这个问题。一种方法是使用ServiceWorker来根据需要重写Content-Type头部。不过，这并不总是有效的。当页面被强制重新加载或启用隐私模式时，浏览器经常会禁用Service Worker。

另一种更接近您提议的方法是在JavaScript中以内存方式获取PDF。您可以使用Fetch API来实现这一点，然后创建一个Blob URL，并让浏览器下载它。尚未经过测试，但大致如下：

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()。

请注意，这对于特别大的文档可能不起作用。小型文档则没有问题。

还要注意，并非所有浏览器都能显示PDF，也并非所有系统都配置允许浏览器自行显示PDF。