更新Google Chrome后,新窗口中的报告jsPDF不再起作用。
控制台显示消息:
不允许将顶部框架导航到数据URL:data:application / pdf; base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ....
你能帮助我吗?
谢谢。
显然谷歌Chrome已经取消了对顶级框架导航的支持,你可以在这里看到更多信息:https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM
您可以尝试将jsPDF渲染为iFrame
角2 -
app.component.html -
<object id="obj" [attr.data] type="application/pdf"> </object>
app.component.ts
document.getElementById('obj').dataset.data = doc.output("datauristring");
var blob = doc.output("blob");
window.open(URL.createObjectURL(blob));
使用download =“”使我能够下载该文件
现在,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();
我最近遇到了同样的问题,使用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>')
也许可以帮助,用下载属性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();
}
<iframe id="ManualFrame"
frameborder="0"
style="border:0"
allowfullscreen>
</iframe>
<script>
$(function () {
setManualFrame();
});
function setManualFrame() {
$("#ManualFrame").attr("height", screen.height);
$("#ManualFrame").attr("width", screen.width);
$("#ManualFrame").attr("src", "data:application/pdf;base64," + Your_PDF_Data);
}
</script>
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);
}
@ kuldeep-CHOUDHARY
嗨,事实上,要解决我使用angularJS 1.5.xx的对象标签
<object ng-attr-data="{{data}}" type="application/pdf"></object>
并在脚本中:
$scope.doc.data = $sce.trustAsResourceUrl(doc.output("datauristring"));
在纯JavaScript中,也许这样有用:
HTML:
<object id="obj" type="application/pdf" ></object>
JS:
document.elementById('obj').data = doc.output("datauristring");
如果我错了,请尝试纠正我。
与jspdf无关,但在这里帮助了我(这个问题是谷歌的热门话题):如果为锚标记指定download="..."
属性,下载提示将正确打开。