Verwenden Sie JavaScript, um eine PNG-Datei auf den Server herunterzuladen und eine neue Datei mit einer anderen Dateierweiterung (.pdf) zu erstellen.

Question

Der Code meiner Website ist in einem sehr umständlichen, beschissenen Backend gespeichert. Leider ist der Inhaltsheader sehr streng gesperrt. Auf alle Dateilinks, die mit .pdf enden, kann nur über die UI-Download-Eingabeaufforderung zugegriffen werden. strong>PDF-Dateien. Mein aktueller Gedanke ist, dass ich die Datei vielleicht auf den Server hochladen und in file.pdf.png umbenennen könnte (dies scheint möglich zu sein, indem die Bedingung für den Serverinhaltsheader erfüllt wird, damit sie wie ein PNG-Dateityp aussieht. Der Browser lädt die Datei herunter in den Speicher). Ich möchte dann in der Lage sein, eine neue Datei in JavaScript zu erstellen, indem ich die Datei herunterladbar mache (In Memory). Ein an anderer Stelle vorgeschlagener Ansatz besteht darin, den Inhalt der beschädigten PNG-Datei mit Base64 zu kodieren, dann eine neue Datei in JavaScript basierend auf dem dekodierten Base64-Inhalt zu erstellen und ihr den Erweiterungsnamen .pdf zu geben, so die Hoffnung dass es als PDF-Datei funktioniert und im Speicher gespeichert wird, sodass Benutzer nichts auf ihr Gerät herunterladen müssen. Das Endziel besteht darin, die Datei im Speicher (aus dem Backend des Benutzers) abzurufen und sie mit dem integrierten PDF-Viewer des Browsers anzuzeigen.

//Der Server hat die Möglichkeit, Dateien hochzuladen //Angenommen, dass es sich bei dem, was Sie hochladen, tatsächlich um eine PDF-Datei handelt, an deren Ende jedoch die Erweiterung .png angehängt ist, //Links zu diesen Dateien sehen also wie folgt aus: https://the-website.com/file.pdf.png

//Jetzt muss ich in der Lage sein, diese Datei im Hintergrund abzurufen und sie hoffentlich im Speicher zu haben, damit der Benutzer nicht mit dem UI-Download-Popup interagieren muss.

//Dann muss ich irgendwie den Dateiinhalt (file.pdf.png) extrahieren und eine gültige PDF-Datei basierend auf der Datei mit einer Pseudodateierweiterung erstellen. Die resultierende Datei sollte file.pdf sein . Diese Datei muss im Speicher gespeichert werden, damit ich sie auf einer Webseite mit etwas wie oder was auch immer für die Anzeige der PDF-Datei in verschiedenen Browsern angezeigt werden kann, aber ich kann das nicht erzwingen Der Benutzer gibt ein UI-Popup ein oder lädt auf sein Gerät herunter (ich möchte nur im Speicher arbeiten).

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。