JsPDF - 不允许将顶部框架导航到数据URL

Question

更新Google Chrome后,新窗口中的报告jsPDF不再起作用.

控制台显示消息:

不允许将顶部框架导航到数据URL:data:application/pdf; base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ....

你能帮助我吗？

谢谢.

Answer 1

现在,Chrome已删除顶部框架导航,效果很好.仅在chrome中下载pdf会产生问题.下载在firefox中运行良好.

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 2

显然,谷歌浏览器已取消对顶级框架导航的支持,您可以在此处查看更多信息:https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

您可以尝试将jsPDF渲染为iFrame

Answer 3

我最近遇到了同样的问题,使用FileReader对象来读取内容并显示我的JSReport.

 var reader = new FileReader();                        
 reader.onload = function (e) {
      window.open(reader.result, "_blank");
 }
 reader.readAsDataURL(blob);

不幸的是,在Chrome更新后,我的所有报告都停止了工作.我试图通过使用Blob对象解决这个问题,它仍然有效,但如果你有一个弹出窗口拦截器,它将无法正常工作.

 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 window.open(fileURL);

我终于找到了一种方法来通过在阅读本主题后动态创建iFrame来避免这个问题,我决定分享解决方案.

 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 4

也许可以帮忙，创建一个具有下载属性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 5

download元素的属性必须a包含文件名。

function window_download( datauri )
{
  const match = datauri.match(/(filename=)([^;]+)/);
  const fileName = match ? match[2] : '' ;
  if ( fileName )
  {
    const downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = datauri ;
    downloadLink.click();
  }
else
{
throw 'missing download file name' ;
}

   // get contents of pdf from jsPDF as a data uri.
    const uri = pdf.output('datauristring', 'packing-list.pdf' );
    window_download( uri ) ;