base64 en pdf javascript

Base64 est une méthode de codage couramment utilisée pour convertir des données binaires au format texte afin qu'elles puissent être transmises sur le réseau. PDF (Portable Document Format, Portable Document Format) est un format utilisé pour présenter et échanger des documents.

En programmation JavaScript, nous avons parfois besoin de convertir des données codées en Base64 au format PDF afin de pouvoir afficher ou télécharger ces documents PDF dans le navigateur. Dans cet article, nous expliquerons comment convertir l'encodage Base64 au format PDF à l'aide de JavaScript.

1. Obtenir les données codées en Base64

Tout d'abord, nous devons obtenir les données codées en Base64. Cela peut être réalisé de différentes manières, par exemple en obtenant des données à partir d'un serveur backend ou d'une API Web, ou à partir d'un formulaire ou d'une interaction utilisateur sur le frontend.

Dans cet exemple, nous utiliserons une variable chaîne appelée base64Data pour représenter nos données codées en Base64. Voici l'exemple de code pour représenter ces données :

var base64Data = "JVBERi0xLjMKJcfs...";

2. Convertir les données Base64 au format binaire

Ensuite, nous devons encoder les données en Base64 Reconvertissez au format binaire. Ceci peut être réalisé en utilisant la fonction window.atob(), qui accepte une chaîne codée en Base64 et renvoie une chaîne représentant les données binaires de cette chaîne.

Ce qui suit est un exemple de code pour convertir des données Base64 au format binaire :

var binaryData = window.atob(base64Data);

3. Créer un objet Blob

Ensuite, nous devons créer un objet Blob, qui représente un objet de type fichier contenant des données brutes immuables. Les objets Blob sont couramment utilisés dans le transfert de données AJAX dans les applications Web.

Voici un exemple de code pour créer un objet Blob :

var blob = new Blob([binaryData], { type: "application/pdf" });

Ici, nous transmettons la chaîne binaireData en tant que paramètre de tableau au constructeur Blob. Nous avons également spécifié le type MIME comme « application/pdf », ce qui indique que nous créons un objet Blob au format de fichier PDF.

4. Create ObjectURL

Une fois que nous avons créé l'objet Blob, nous devons le convertir au format URL afin de pouvoir y accéder via une fenêtre de navigateur y accède. Nous pouvons créer cette URL en utilisant la méthode window.URL.createObjectURL().

Ce qui suit est un exemple de code pour convertir un objet Blob au format URL :

var url = window.URL.createObjectURL(blob);

Cela renverra une chaîne d'URL représentant l'objet Blob.

5. Affichez ou téléchargez le PDF dans votre navigateur

Maintenant que nous avons créé une URL nous pouvons la lier à la page HTML sur un lien élément afin que nous puissions afficher ou télécharger ce fichier PDF dans le navigateur.

Voici un exemple de code pour lier un fichier PDF à un élément de lien sur une page HTML :

var link = document.createElement('a');
link.href = url;
link.download = "file.pdf";
link.click();

Ici, nous avons créé un nouvel élément de lien appelé "link", et définissez son attribut href sur l'URL précédemment créée. Nous spécifions également l'attribut download, qui nous permet de télécharger le fichier lorsque l'on clique sur le lien. Enfin, nous utilisons link.click() pour cliquer sur cet élément de lien afin de pouvoir afficher ou télécharger ce fichier PDF dans le navigateur.

Résumé

Dans cet article, nous avons présenté comment utiliser JavaScript pour convertir les données codées en Base64 au format PDF, puis afficher et télécharger ces fichiers PDF dans le navigateur. Ces étapes incluent l'obtention de données à partir du codage Base64, la conversion des données au format binaire, la création d'objets Blob, la création d'ObjectURL et la liaison de fichiers PDF sur des pages HTML. Ce faisant, assurez-vous de suivre les meilleures pratiques telles que la validation du type de données, la gestion des erreurs et la sécurité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!