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

Question

我试图打印一个由jspdf生成并加载到iframe的pdf，但我收到了错误消息：

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属性。

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

< li >从pdf创建blob(即:pdf.output('blob ')..) < li >将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>