Comment changer le nom du fichier PDF généré à partir de blob (titre de la barre de navigation) en React Js

Question

Le code ci-dessous que nous utilisons pour générer un fichier PDF à partir d'un Blob. Une fois que le lien est cliqué, je dois ouvrir le PDF dans un nouvel onglet avec un nom de fichier approprié et non comme la chaîne générée automatiquement ci-dessus à partir du Blob.

downloadDocument = (fileContent) => {
        const pdfContent = this.base64ToArrayBuffer(fileContent);
        const pdfBlob = new Blob([pdfContent], { type: DOWNLOAD_PDF.PDF_TYPE });

        const url = window.URL.createObjectURL(pdfBlob);
        const newWindow = window.open();
        newWindow.location.href = url;
    };

base64ToArrayBuffer = (base64) => {
        const binaryString = window.atob(base64);
        const binaryLen = binaryString.length;
        const bytes = new Uint8Array(binaryLen);

        for (let i = 0; i < binaryLen; i += 1) {
            const ascii = binaryString.charCodeAt(i);
            bytes[i] = ascii;
        }

        return bytes;
    };

Il faut changer le nom de fichier et l'URL du PDF Blob. [1]: https://i.stack.imgur.com/nk61E.png

Answer 1

Utilisez une balise d'ancre et définissez l'attribut de téléchargement avec le nom de fichier que vous souhaitez également définir link.target sur _blank pour l'ouvrir dans un nouvel onglet

downloadDocument = (fileContent, fileName) => {
    const pdfContent = this.base64ToArrayBuffer(fileContent);
    const pdfBlob = new Blob([pdfContent], { type: DOWNLOAD_PDF.PDF_TYPE });
    // utilisez une balise d'ancre
    const link = document.createElement('a');
    link.href = URL.createObjectURL(pdfBlob);
    // Définissez l'attribut de téléchargement pour spécifier le nom de fichier souhaité
    link.download = fileName;
    link.target = "_blank"; // définissez ceci sur _blank pour l'ouvrir dans un nouvel onglet
    link.click();
    URL.revokeObjectURL(link.href);
};