关于谷歌浏览器：JsPDF-不允许将顶部框架导航到数据URL


JsPDF - Not allowed to navigate top frame to data URL

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

控制台显示以下消息：

Not allowed to navigate top frame to data URL:
data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1....

你能帮我吗？

谢谢。

这很好，因为chrome已删除了顶部框架导航。仅下载chrome中的pdf会出现问题。在Firefox浏览器中下载效果很好。

1
2
3
4
5
6
var string = doc.output('datauristring');
var iframe ="<iframe width='100%' height='100%' src='" + string +"'></iframex>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
相关讨论

显然Google Chrome已删除了对顶部导航的支持，您可以在此处查看更多信息：https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM <铅>

您可以尝试将jsPDF呈现到iFrame

相关讨论

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

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

很遗憾，在chrome更新后，我的所有报告都停止了工作。
我试图通过使用Blob对象来解决此问题，但该对象仍在工作，但是如果您有弹出窗口阻止程序，它将无法工作。

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

在阅读完本主题后，我终于找到了一种通过动态创建iFrame来避免此问题的方法，因此我决定共享解决方案。

1
2
3
4
 var file = new Blob([blob], { type: 'application/pdf' });
 var fileURL = URL.createObjectURL(file);
 var win = window.open();
 win.document.write('&lt;iframe src="' + fileURL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen>&lt;/iframex&gt;')
相关讨论

也许可以帮忙，创建一个具有下载属性html5的导出功能：

1
2
3
4
5
6
7
8
9
10
11
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();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
}
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
&lt;iframe id="ManualFrame"
        frameborder="0"
        style="border:0"
        allowfullscreen>
&lt;/iframex&gt;


    $(function () {
        setManualFrame();
    });

    function setManualFrame() {
        $("#ManualFrame").attr("height", screen.height);
        $("#ManualFrame").attr("width", screen.width);
        $("#ManualFrame").attr("src","data:application/pdf;base64," + Your_PDF_Data);
    }

由于chrome取消了对-顶级导航的支持。幸运的是jsPDF有一个API-" save()"，它提供与doc.output('datauri')

相同的功能

下面是save()

的示例实现

1
2
3
var doc = new jsPDF();
doc.addImage(imgData, 'JPEG', 0, 0, 300, 160);    
doc.save('fileName.pdf');

是否保存(文件名，选项)a？’{jsPDF | Promise}

另存为PDF文档。 jsPDF.output('save'，'filename.pdf')的别名。使用FileSaver.js方法saveAs。
有关更多信息，请参见JSPDF文档-

基于Joyston的答案，但无需进行重新解析，因此也无需额外逃脱某些操作：

1
2
3
4
5
6
7
8
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);
相关讨论

@ kuldeep-choudhary

实际上，要解决我正在将对象标记与angularJS 1.5.xx一起使用的问题，

1
<object ng-attr-data="{{data}}" type="application/pdf"></object>

和脚本中的内容：

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

在纯JavaScript中，也许像这样工作：

html：

1
<object id="obj" type="application/pdf"></object>

js：

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

如果我写错了，请尝试并纠正我。

相关讨论

添加属性下载

1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * Creates an anchor element `` with
 * the base64 pdf source and a filename with the
 * HTML5 `download` attribute then clicks on it.
 * @param  {string} pdf
 * @return {void}    
 */
function downloadPDF(pdf) {
    const linkSource = `data:application/pdf;base64,${pdf}`;
    const downloadLink = document.createElement("a");
    const fileName ="vct_illustration.pdf";

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

来源：https：//medium.com/octopus-labs-london/downloading-a-base-64-pdf-from-an-api-request-in-javascript-6b4c603515eb

在angular2中-

app.component.html-

1
 <object id="obj"  [attr.data]  type="application/pdf"> </object>

app.component.ts

1
2
3
4
 document.getElementById('obj').dataset.data = doc.output("datauristring");

  var blob = doc.output("blob");
  window.open(URL.createObjectURL(blob));

使用download ="使我能够下载文件

与jspdf无关，但确实对我有帮助(并且这个问题在Google方面排名很高)：如果为锚标记指定download="..."属性，则下载提示将正确打开。