jsPDF-No se permite navegar por el marco superior a la URL de datos

Esto funciona bien ahora que Chrome ha eliminado la navegación del marco superior. Solo descargar el pdf en Chrome da problema. Descargar funciona bien en 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();

Recientemente tuve el mismo problema al usar el objeto FileReader para leer contenido y mostrar mi JSReport.

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

Desafortunadamente después de la actualización de Chrome todo mi informe dejó de funcionar. Traté de arreglar esto mediante el uso de objeto Blob y todavía está funcionando, pero si tiene un bloqueador de ventanas emergentes no funcionará.

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

Finalmente encuentro una manera de evitar este problema creando el iFrame dinámicamente después de leer este tema y decidí compartir la solución .

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

Tal vez pueda ayudar, crear una función para exportar con el atributo de descarga 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>

Basado en Joyston ' s respuesta , pero sin reparsing y por lo tanto sin necesidad adicional de escapar de algo:

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

Hola, de hecho, para resolver estoy usando la etiqueta de objeto con AngularJS

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

Y en script:

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

En javascript puro, tal vez así funcione:

Html:

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

Js:

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

Por favor, trata de corregirme si me equivoco.

No está relacionado con jspdf, pero me ayudó aquí (y esta pregunta es el éxito principal en Google): Si se especifica un atributo download="..." a la etiqueta de anclaje, el mensaje de descarga se abrirá correctamente.