web-dev-qa-db-fra.com

Ouverture PDF Chaîne dans une nouvelle fenêtre avec javascript

J'ai une chaîne formatée PDF qui ressemble à

%PDF-1.73 0 obj<<< /Type /Group /S /Transparency /CS /DeviceRGB >> /Resources 2 0 R/Contents 4 0 R>> endobj4 0 obj<> streamx��R=o�0��+��=|vL�R���l�-��ځ,���Ge�JK����{���Y5�����Z˯k�vf�a��`G֢ۢ��Asf�z�ͼ��`%��aI#�!;�t���GD?!���<�����B�b��

...

00000 n 0000000703 00000 n 0000000820 00000 n 0000000926 00000 n 0000001206 00000 n 0000001649 00000 n trailer << /Size 11 /Root 10 0 R /Info 9 0 R >>startxref2015%%EOF

J'essaie d'ouvrir cette chaîne dans une nouvelle fenêtre en tant que fichier PDF. Chaque fois que j'utilise window.open () et que j'écris la chaîne dans le nouvel onglet, il pense que le texte doit être le contenu d'un document HTML. Je veux qu'il reconnaisse qu'il s'agit d'un fichier PDF.

Toute aide est très appréciée

javascriptpdf
39
DaveC

Juste pour information, ce qui suit

window.open("data:application/pdf," + encodeURI(pdfString));

ne fonctionne plus dans Chrome. Hier, je suis tombé sur le même problème et j'ai essayé cette solution, mais cela n'a pas fonctionné (il est "interdit de naviguer dans le cadre supérieur vers l'URL de données"). Vous ne pouvez plus ouvrir l'URL des données directement dans une nouvelle fenêtre. Mais, vous pouvez l'envelopper dans iframe et l'ouvrir dans une nouvelle fenêtre comme ci-dessous. =)

let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(yourDocumentBase64VarHere)+"'></iframe>")
44
Noby Fujioka
window.open("data:application/pdf," + escape(pdfString));

Celui ci-dessus collant le contenu codé dans l'URL. Cela fait une restriction de la longueur du contenu dans l'URL et donc PDF a échoué (en raison d'un contenu incomplet).

19
Ramprabhu Kaliaperumal

Vous souhaiterez peut-être explorer l'utilisation de l'URI de données. Cela ressemblerait à quelque chose.

window.open("data:application/pdf," + escape(pdfString));

Je n'ai pas été immédiatement en mesure de faire fonctionner cela, possible parce que le formatage de la chaîne binaire fournie. J'utilise également généralement des données encodées en base64 lors de l'utilisation de l'URI de données. Si vous pouvez transmettre le contenu du backend encodé, vous pouvez utiliser ..

window.open("data:application/pdf;base64, " + base64EncodedPDF);

J'espère que c'est la bonne direction pour ce dont vous avez besoin. Notez également que cela ne fonctionnera pas du tout dans IE6/7 car ils ne prennent pas en charge les URI de données.

17
Morgan ARR Allen

Je me rends compte que c'est une question assez ancienne, mais j'ai eu la même chose aujourd'hui et j'ai trouvé la solution suivante:

doSomethingToRequestData().then(function(downloadedFile) {
  // create a download anchor tag
  var downloadLink      = document.createElement('a');
  downloadLink.target   = '_blank';
  downloadLink.download = 'name_to_give_saved_file.pdf';

  // convert downloaded data to a Blob
  var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });

  // create an object URL from the Blob
  var URL = window.URL || window.webkitURL;
  var downloadUrl = URL.createObjectURL(blob);

  // set object URL as the anchor's href
  downloadLink.href = downloadUrl;

  // append the anchor to document body
  document.body.appendChild(downloadLink);

  // fire a click event on the anchor
  downloadLink.click();

  // cleanup: remove element and revoke object URL
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
});
13
Chris Cashwell

Celui-ci a fonctionné pour moi.

window.open("data:application/octet-stream;charset=utf-16le;base64,"+data64);

Celui-ci a fonctionné aussi

 let a = document.createElement("a");
 a.href = "data:application/octet-stream;base64,"+data64;
 a.download = "documentName.pdf"
 a.click();
13
Felipe Bejarano
var byteCharacters = atob(response.data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);

Vous renvoyez une chaîne base64 à partir de l'API ou d'une autre source. Vous pouvez également le télécharger.

6
Himanshu Chawla

Je veux juste ajouter avec la réponse de @Noby Fujioka, Edge ne prendra pas en charge la suite

window.open("data:application/pdf," + encodeURI(pdfString));

Pour Edge, nous devons le convertir en blob et c'est quelque chose comme suit

//If Browser is Edge
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                var byteCharacters = atob(<Your_base64_Report Data>);
                var byteNumbers = new Array(byteCharacters.length);
                for (var i = 0; i < byteCharacters.length; i++) {
                    byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                var byteArray = new Uint8Array(byteNumbers);
                var blob = new Blob([byteArray], {
                    type: 'application/pdf'
                });
                window.navigator.msSaveOrOpenBlob(blob, "myreport.pdf");
            } else {
                var pdfWindow = window.open("", '_blank');
                pdfWindow.document.write("<iframe width='100%' style='margin: -8px;border: none;' height='100%' src='data:application/pdf;base64, " + encodeURI(<Your_base64_Report Data>) + "'></iframe>");
            }
4
Hasibul

J'ai eu ce problème avec une demande d'expédition FedEx. J'exécute la demande avec AJAX. La réponse comprend le suivi #, le coût, ainsi qu'une chaîne pdf contenant l'étiquette d'expédition.

Voici ce que j'ai fait:

Ajoutez un formulaire:

<form id='getlabel' name='getlabel' action='getlabel.php' method='post' target='_blank'>
<input type='hidden' id='pdf' name='pdf'>
</form>

Utilisez javascript pour remplir la valeur du champ caché avec la chaîne pdf et publier le formulaire.

Où getlabel.php:

<?
header('Content-Type: application/pdf');
header('Content-Length: '.strlen($_POST["pdf"]));
header('Content-Disposition: inline;');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
print $_POST["pdf"];
?>
4
Dan Ross

Basé sur d'autres anciennes réponses:

escape() la fonction est désormais obsolète,

Utilisez plutôt encodeURI () ou encodeURIComponent () .

Exemple qui a fonctionné dans ma situation:

window.open("data:application/pdf," + encodeURI(pdfString));

Codage heureux!

4
EaziLuizi

Une version mise à jour de la réponse de @ Noby Fujioka :

function showPdfInNewTab(base64Data, fileName) {  
  let pdfWindow = window.open("");
  pdfWindow.document.write("<html<head><title>"+fileName+"</title><style>body{margin: 0px;}iframe{border-width: 0px;}</style></head>");
  pdfWindow.document.write("<body><embed width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(data)+"#toolbar=0&navpanes=0&scrollbar=0'></embed></body></html>");
}
1
Joe

utilisez la fonction "printPreview (binaryPDFData)" pour obtenir la boîte de dialogue d'aperçu avant impression des données pdf binaires.

printPreview = (data, type = 'application/pdf') => {
    let blob = null;
    blob = this.b64toBlob(data, type);
    const blobURL = URL.createObjectURL(blob);
    const theWindow = window.open(blobURL);
    const theDoc = theWindow.document;
    const theScript = document.createElement('script');
    function injectThis() {
        window.print();
    }
    theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
    theDoc.body.appendChild(theScript);
};

b64toBlob = (content, contentType) => {
    contentType = contentType || '';
    const sliceSize = 512;
     // method which converts base64 to binary
    const byteCharacters = window.atob(content); 

    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.Push(byteArray);
    }
    const blob = new Blob(byteArrays, {
        type: contentType
    }); // statement which creates the blob
    return blob;
};
0
Manoj

Une suggestion est d'utiliser une bibliothèque pdf comme PDFJS.

Vous devez ajouter les éléments suivants "data:application/pdf;base64" + votre chaîne pdf, et définissez le src de votre élément sur cela.

Essayez avec cet exemple:

var pdfsrc = "data:application/pdf;base64" + "67987yiujkhkyktgiyuyhjhgkhgyi...n"

<pdf-element id="pdfOpen" elevation="5" downloadable src="pdfsrc" ></pdf-element>

J'espère que ça aide :)

0
Sehul Viras

pour la dernière version Chrome version, cela fonctionne pour moi:

var win = window.open ("", "Title", "toolbar = no, location = no, directory = no, status = no, menubar = no, scrollbars = yes, resizable = yes, width = 780, height = 200 , haut = "+ (screen.height-400) +", gauche = "+ (screen.width-840)); win.document.body.innerHTML = 'iframe width = "100%" height = "100%" src = "data: application/pdf; base64," + base64 + ">';

0
Yassine Moslah

// pour la vue pdf

let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64," + data.data +"'></iframe>");
0
Santosh Thakur