阻止具有原点"http:// localhost:8084"的帧访问跨源帧

Question

我正在尝试打印由jspdf生成的pdf并加载到iframe上,但是我收到了错误消息:

"DOMException:通过访问跨源帧来阻止具有原始" http:// localhost:8084 "的帧."

这是我的代码:

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

Answer 1

DOMException:通过访问跨源框架阻止原始" http:// localhost:8084 "的框架."

此消息有效,因为当您使用pdf加载iframe时,您使用datauristring而不是blob设置src属性.

一个简单的解决方案基于:

• 从pdf创建一个blob(即:pdf.output('blob')..)
• 将blob转换为URL(即:URL.createObjectURL(blobPDF))

使用您的方法违反了该策略,因为协议(http/data)不同:

• 一个是http:// localhost:8084
• iframe是:data:application/pdf

另一个错误是:

document.getElementById('pdf-box')

您必须使用id而不是名称,因此将其更改为:

document.getElementById('pdf-prueba')

以下更改的代码适用于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>