JsPDF-pas autorisé à naviguer cadre supérieur à L'URL de données

Cela fonctionne bien maintenant que chrome a supprimé la navigation du cadre supérieur. Seul le téléchargement du pdf dans chrome pose problème. Télécharger 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();

J'ai récemment eu le même problème en utilisant L'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 l'objet Blob et cela 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);

Je trouve enfin 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 la 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>')

Peut-être peut-être aider, créer 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();
}

<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>

Basé sur Joyston Réponse , mais sans reparsing 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);

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);
}

@kuldeep-choudhary

Salut, en fait, pour résoudre j'utilise la balise d'objet avec angularJS

<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 plait, essayez de me corriger si je me trompe.

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