web-dev-qa-db-fra.com

JsPDF - Interdiction de naviguer dans le cadre supérieur vers l'URL de données

Après la mise à jour de Google Chrome, le rapport jsPDF dans une nouvelle fenêtre ne fonctionne plus.

La console affiche le message:

Non autorisé à naviguer dans le cadre supérieur de l'URL de données: données: application/pdf; base64, JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ....

Pouvez-vous m'aider?

Merci.

google-chromeframejspdf
29
Márcio Rossato

Apparemment, Google Chrome a supprimé la prise en charge de la navigation par le haut, vous pouvez voir plus d'informations ici: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

Vous pouvez essayer de convertir le fichier jsPDF en iFrame.

27
Pedro Calderon

Cela fonctionne bien maintenant que Chrome a supprimé la navigation dans le cadre supérieur. Seul le téléchargement du fichier pdf en chrome pose problème. Le téléchargement fonctionne bien dans firefox tho.

var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
30
Joyston

J'ai récemment eu le même problème en utilisant un objet FileReader pour lire le contenu et afficher mon JSReport.

 var reader = new FileReader();                        
 reader.onload = function (e) {
      window.open(reader.result, "_blank");
 }
 reader.readAsDataURL(blob);

Malheureusement, après la mise à jour de chrome, tout mon rapport a cessé de fonctionner .. J'ai essayé de résoudre ce problème en utilisant un objet Blob et il fonctionne toujours, mais si vous avez un bloqueur de popup, cela ne fonctionnera pas.

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 window.open(fileURL);

J'ai enfin trouvé un moyen d'éviter ce problème en créant dynamiquement l'iFrame après avoir lu ce sujet et j'ai décidé de partager le solution.

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 var win = window.open();
 win.document.write('<iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')
12
Sadek Lallouani

Peut-être que vous pouvez aider, créez une fonction à exporter avec l'attribut de téléchargement html5:

var docPdf = doc.output();
exportToFile(docPdf,defaults.type);

function exportToFile(data,type){

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/'+type+';filename='+'exportar.'+type+';'+'charset=utf-8,' + encodeURI(data);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'exportar.'+type;
    hiddenElement.click();
}
4
nikoz84
<iframe id="ManualFrame"
        frameborder="0"
        style="border:0"
        allowfullscreen>
</iframe>

<script>
    $(function () {
        setManualFrame();
    });

    function setManualFrame() {
        $("#ManualFrame").attr("height", screen.height);
        $("#ManualFrame").attr("width", screen.width);
        $("#ManualFrame").attr("src", "data:application/pdf;base64," + Your_PDF_Data);
    }
</script>
1
Lonely Planeteer
var pdfUrl = doc.output('datauri').substring(doc.output('datauri').indexOf(',')+1);
var binary = atob(pdfUrl.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
}

var blob = new Blob( [view], { type: "application/pdf" });
var url = URL.createObjectURL(blob);

function openPDF(){
    window.open(url);
}
1
Surya T

Basé sur Joyston 's answer , mais sans réparation et donc sans besoin supplémentaire d'échapper à quelque chose:

x=window.open();
iframe=x.document.createElement('iframe')
iframe.width='100%'
iframe.height='100%'
iframe.frameBorder=0
iframe.style="border: 0"
iframe.src='data:text/html........' //data-uri content here
x.document.body.appendChild(iframe);
1
T S

@ kuldeep-choudhary

Bonjour, en fait, pour résoudre, j'utilise une balise d'objet avec angularJS 1.5.xx

<object ng-attr-data="{{data}}" type="application/pdf"></object>

et dans le script:

$scope.doc.data = $sce.trustAsResourceUrl(doc.output("datauristring"));

En javascript pur, peut-être que cela fonctionne:

html:

<object id="obj" type="application/pdf" ></object>

js: 

document.elementById('obj').data = doc.output("datauristring");

s'il vous plaît, essayez de me corriger si je me trompe.

0
Márcio Rossato

Pas lié à jspdf, mais m'a aidé ici (et cette question est le plus populaire chez google): Si vous spécifiez un attribut download="..." à la balise d'ancrage, l'invite de téléchargement s'ouvrira correctement.

0
Blauhirn