JsPDF - 不允許將頂部框架導航到數據網址

更新Google Chrome後，新窗口中的報告jsPDF不再有效。JsPDF - 不允許將頂部框架導航到數據網址

該控制檯顯示消息：

不允許導航頂部幀到數據URL：數據：應用/ PDF; BASE64，JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1 ....

你能幫助 - 我？

謝謝。

來源

2017-08-03 Márcio Rossato

頂級框架導航顯然，谷歌Chrome瀏覽器已刪除的支持，你可以看到更多的信息在這裏：https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM

您可以嘗試到jsPDF渲染一個iFrame

來源

2017-08-03 23:16:10

tks，in iframe works。 –

hi @MárcioRossato你可以給我發送代碼在i幀中呈現jsPdf。 –

@KuldeePChoudharY嗨，我正在使用angularJS，我發送了腳本，我希望能幫到你！ –

<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>

來源

2017-08-10 01:47:17

@ kuldeep，CHOUDHARY

嗨，其實，要解決我使用對象標記與angularJS

<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");

請嘗試並糾正我，如果我錯了。

來源

2017-08-14 00:37:30

我不能使用AngularJS，你能用JavaScript發送嗎？ –

https://stackoverflow.com/questions/45649105/not-allowed-to-navigate-top-frame-to-data-url-jspdf –

我最近有使用FileReader對象讀取內容並顯示我的JSReport相同的問題。

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

在鉻更新後不幸，所有我的報告停止工作。我試圖通過使用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>')

來源

2017-08-15 20:14:03

works iframe，2017 chrome ff – waza123

適用於顯示和打印，但無法下載pdf，下載按鈕似乎沒有被觸發。 – adam

在FF中下載作品，但不在Chrome中下載。任何人都找到鉻的解決方案了嗎？ – lentyai

這個效果很好，現在鉻已經刪除了頂部框架導航。只有下載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();

來源

2017-08-21 05:02:43 Joyston

這個解決方案對我非常有效。我正在使用html2canvas。 –

在Firefox和Chrome上爲我工作。需要encodeURIComponent（字符串）。 – user2099484

那麼在Chrome中下載的解決方案是什麼？ –

也許能有所幫助，創建與下載屬性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(); 
}

來源

2017-10-18 16:25:10 nikoz84

基於Joyston的answer，但避免了重新分析，因此沒有額外需要逃避的東西：

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

來源

2017-11-30 20:52:01

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

來源

2017-12-17 13:49:19

你能解釋一下如何解決原來的問題嗎？ –

你可以使用這段代碼在一個新標籤中打開PDF文檔作爲blob ...導致chrome塊JsPDF打開文檔....我認爲這是原來的問題。 –

與jspdf無關，但在這裏幫了我（這個問題是谷歌的熱門話題）：如果爲anchor標籤指定download="..."屬性，則下載提示符會正確打開。

來源

2018-03-01 13:03:32 Blauhirn

JsPDF - 不允許將頂部框架導航到數據網址

回答

相關問題