Utilisez JavaScript pour télécharger un fichier .png sur le serveur et créez un nouveau fichier avec une extension de fichier différente (.pdf)

Question

Le code de mon site Web est stocké dans un backend très lourd et merdique. Malheureusement, ils verrouillent très étroitement l'en-tête du contenu, tout lien de fichier se terminant par .pdf ne sera accessible que via l'invite de téléchargement de l'interface utilisateur, ils n'autorisent pas fichiers strong>PDF. Ma pensée actuelle est que je pourrais peut-être télécharger le fichier sur le serveur et le renommer en file.pdf.png (cela semble permettre, en satisfaisant la condition d'en-tête du contenu du serveur, de le faire ressembler à un type de fichier .png. Le navigateur télécharge le fichier dans mémoire). Je souhaite ensuite pouvoir créer un nouveau fichier en JavaScript en rendant le fichier téléchargeable (In Memory). Une approche proposée ailleurs consiste à encoder en base64 le contenu du fichier .png corrompu, puis à créer un nouveau fichier en JavaScript basé sur le contenu base64 décodé et à lui donner le nom d'extension .pdf qu'il fonctionnera comme un fichier PDF et sera stocké en mémoire afin que les utilisateurs n'aient pas à télécharger quoi que ce soit sur leur appareil. L'objectif final est de récupérer le fichier en mémoire (à partir du backend de l'utilisateur) et de l'afficher à l'aide de la visionneuse PDF intégrée au navigateur.

//Le serveur a la possibilité de télécharger des fichiers //En supposant que ce que vous téléchargez est en fait un fichier PDF, mais avec une extension .png ajoutée à la fin, //Les liens vers ces fichiers ressembleront donc à https://the-website.com/file.pdf.png

//Maintenant, je dois pouvoir récupérer ce fichier en arrière-plan et, espérons-le, l'avoir en mémoire afin que l'utilisateur n'ait pas à interagir avec la fenêtre contextuelle de téléchargement de l'interface utilisateur.

//Ensuite, d'une manière ou d'une autre, je dois extraire le contenu du fichier (file.pdf.png) et créer un fichier PDF valide basé sur le fichier avec une pseudo extension de fichier, le fichier résultant doit être file.pdf . Ce fichier doit être stocké en mémoire pour que je puisse l'afficher dans une page Web en utilisant quelque chose comme ou

Answer 1

L'extension du fichier n'a en fait pas grand-chose à voir avec ça... Content-TypeL'en-tête oui.

D'après votre description, je suppose que lors de la réception des fichiers PDF, le serveur n'utilise pas le type correct dans la réponse, mais les envoie plutôt sous la forme application/octet-stream ou un autre type. (Il s'agit d'un type courant et les navigateurs les téléchargent par défaut.)

Il existe plusieurs façons de résoudre ce problème. Une solution consiste à utiliser un ServiceWorker pour remplacer l'en-tête Content-Type si nécessaire. Cependant, cela ne fonctionne pas toujours. Les navigateurs désactivent souvent les service Workers lorsqu'une page est obligée de recharger ou lorsque le mode de confidentialité est activé.

Une autre approche plus proche de ce que vous proposez est de mettre le PDF en mémoire en JavaScript. Vous pouvez le faire à l'aide de l'API Fetch, puis créer une URL Blob et laisser le navigateur la télécharger. Pas encore testé, mais voici l'essentiel :

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

Veuillez noter que cela peut ne pas fonctionner pour les documents particulièrement volumineux. Les petits documents ne posent aucun problème.

Notez également que tous les navigateurs ne peuvent pas afficher les PDF et que tous les systèmes ne sont pas configurés pour permettre aux navigateurs d'afficher les PDF de manière autonome.