web-dev-qa-db-fra.com

Blocage d'une trame avec Origin "http: // localhost: 8084" contre l'accès à une trame cross-Origin

J'essaie d'imprimer un pdf généré par jspdf et chargé sur iframe, mais je reçois ce message d'erreur:

"DOMException: Bloqué une trame avec Origin" http: // localhost: 8084 "d'accéder à une trame cross-Origin."

voici mon code:

  <iframe id="pdf-prueba" name="pdf-box"></iframe>


function open(){
    var pdf = new jsPDF('p', 'mm', [55, 5]);
    var data = pdf.output('datauristring');
    $('#pdf-box').attr("src", data).load(function(){
        document.getElementById('pdf-box').contentWindow.print();
    });
}
javascriptjqueryhtmljspdf
6
Malarkey86

DOMException: bloqué une trame avec l'origine " http: // localhost: 8084 " contre l'accès à une trame d'origine croisée. "

Ce message est valide car lorsque vous chargez iframe avec le pdf, vous définissez l'attribut src avec un enregistrement de données, pas un blob.

Une solution simple repose sur:

  • créer un blob à partir de pdf (c'est-à-dire: pdf.output ('blob') ..)
  • convertir le blob en URL (c'est-à-dire: URL.createObjectURL (blobPDF))

La stratégie est violée en utilisant votre approche car les protocoles (http/data) sont différents:

Une autre erreur est:

document.getElementById('pdf-box')

Vous devez utiliser l'identifiant et non le nom, alors changez-le en:

document.getElementById('pdf-prueba')

Le code modifié suivant fonctionne dans Chrome:

function open(){
  var pdf = new jsPDF('p', 'mm', [55, 5]);

  var blobPDF = pdf.output('blob');

  var blobUrl = URL.createObjectURL(blobPDF);

  $('#pdf-prueba').attr("src", blobUrl).load(function(e){
    document.getElementById('pdf-prueba').contentWindow.print();
  });
}

<iframe id="pdf-prueba" name="pdf-box"></iframe>
8
gaetanoM