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

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 en el marco superior a la URL de datos: datos: aplicación / pdf; base64, JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ….

¿Me puedes ayudar?

Gracias.

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

Puede intentar convertir el jsPDF en un iFrame

Esto funciona bien ahora que Chrome ha eliminado la navegación del marco superior. Solo descargando el pdf en cromo da un problema. La descarga funciona bien en Firefox.

var string = doc.output('datauristring'); var iframe = "" var x = window.open(); x.document.open(); x.document.write(iframe); x.document.close(); 

Hace poco tuve el mismo problema al usar el objeto FileReader para leer el 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 solucionar esto usando Objeto Blob y aún 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 encontré una forma de evitar este problema al crear 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('') 

Quizás pueda ayudar, cree 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(); } 
   

Basado en la respuesta de Joyston , 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

  

y en script:

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

En javascript puro, quizás así funciona:

html:

  

js:

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

por favor, intenta y corrígeme si me equivoco.

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

    Intereting Posts