Comment télécharger une image encodée en base64?

Question

J'ai une image encodée en base64 provenant du serveur pour laquelle je veux forcer le téléchargement via JavaScript. Est-ce possible?

Answer 1

1. Si vous voulez le télécharger en utilisant JavaScript (sans aucun back-end), utilisez :

   window.location.href = 'data:application/octet-stream;base64,' + img;

   où img est votre image encodée en base64.

2. Si vous voulez permettre à l'utilisateur de spécifier un nom de fichier, utilisez l'attribut download de la balise a :

   Télécharger

   • Remarque : L'attribut de téléchargement n'est pas pris en charge par les navigateurs très anciens

Answer 2

Voici une manière simple de le faire avec JavaScript...

    var a = document.createElement("a"); //Créer 
    a.href = "data:image/png;base64," + ImageBase64; //Image Base64 va ici
    a.download = "Image.png"; //Nom du fichier ici
    a.click(); //Fichier téléchargé

Answer 3

Il est si simple, il suffit d'utiliser la fonction ci-dessous:

// Paramètres:
// contentType: Le type de contenu de votre fichier.
//              comme application/pdf ou application/msword ou image/jpeg or
//              image/png et ainsi de suite
// base64Data: Vos données base64 réelles
// fileName: Le nom du fichier qui sera téléchargé.

function downloadBase64File(contentType, base64Data, fileName) {
     const linkSource = `data:${contentType};base64,${base64Data}`;
     const downloadLink = document.createElement("a");
     downloadLink.href = linkSource;
     downloadLink.download = fileName;
     downloadLink.click();
}

Answer 4

J'ai trouvé cette solution à partir du code source de la façon dont Chrome prend des captures d'écran de la page entière.

const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = pageImage.naturalWidth;
    canvas.height= pageImage.naturalHeight;

    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(pageImage, 0, 0);
    console.log(canvas, pageImage)
    saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
    let fileName = "image"
    const link = document.createElement('a');
    link.download = fileName + '.png';
    console.log(canvas)
    canvas.toBlob(function(blob) {
        console.log(blob)
        link.href = URL.createObjectURL(blob);
        link.click();
    });
};

Answer 5

Dans mon application Angular, je récupère les fichiers en base 64 depuis le serveur.

En Html:-

En Ts:-

  downloadFile(nomFichier: string, données: any, formatFichier: string): void {
    const linkSource = 'data:'+formatFichier+';base64'+données;
    const downloadLink = document.createElement("a");
    downloadLink.href = linkSource;
    downloadLink.download = nomFichier;
    downloadLink.click();
}