google-chrome - not allowed to navigate top frame to data url jspdf

JsPDF: no se permite navegar por el cuadro superior a la URL de datos

Question

Después de actualizar Google Chrome, el informe jsPDF en una nueva ventana ya no funciona.

La consola muestra el mensaje:

No se permite navegar por el marco superior a la URL de datos: datos: aplicación / pdf; base64, JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ....

¿Me puedes ayudar?

Gracias.

Answer 1

@ kuldeep-choudhary

Hola, de hecho, para resolver estoy usando una etiqueta de objeto con angularJS 1.5.xx

<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, intenta corregirme si me equivoco.

Answer 2

Aparentemente, Google Chrome ha eliminado la compatibilidad con la navegación en el cuadro superior, puede ver más información aquí: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

Puede intentar renderizar el jsPDF en un iFrame

Answer 3

Basado en la share , pero sin volver a analizar 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);

Answer 4

El uso de download = "" me permitió descargar el archivo

Answer 5

En angular2 + -

app.component.html -

 <object id="obj"  [attr.data]  type="application/pdf"> </object>

app.component.ts

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

  var blob = doc.output("blob");
  window.open(URL.createObjectURL(blob));

Answer 6

Esto funciona bien ahora que Chrome ha eliminado la navegación del marco superior. Solo descargar el pdf en Chrome da un problema. Descargar funciona bien en Firefox aunque.

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

Answer 7

No está relacionado con jspdf, pero sí me ayudó aquí (y esta pregunta es la mejor opción en google): si especifica un atributo download="..." para la etiqueta de anclaje, se abrirá correctamente el mensaje de descarga.

Answer 8

Quizás 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();
}

Answer 9

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. Intenté solucionar esto usando el objeto Blob y todavía funciona, pero si tienes 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>'')

Answer 10

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

Answer 11

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