HTML IFrame 不允許下載文件
[英]HTML IFrame not allowed to download file
問題描述
我正在嘗試下載一個文件，該文件根據它所接收的值構建自身。 這是我的代碼
<html>
<head>
<script>
var myList=[];
window.onmessage = function(event){
if (event.data) {
myList = event.data;
if (myList.length>0) {
buildHtmlTable();
}
}
else {
myList = [];
}
};
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
return exportF(); // Make Excel file download now
}
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash =`enter code here` myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
function exportF() {
var table = document.getElementById("excelDataTable");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html);
var link = document.getElementById("downloadLink");
link.setAttribute("href", url);
link.setAttribute("download", "export.xls"); // Choose the file name here
link.click(); // Download your excel file
return false;
}
</script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="">
<table id="excelDataTable" border="1">
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>
代碼本身有效，但我得到的錯誤是“不允許下載。啟動或實例化下載的框架是沙盒化的，但未設置標志“允許下載”。請參閱https://www.chromestatus.com/feature /5706745674465280了解更多詳情。”
我能做些什么來解決這個問題？ 感覺就像我嘗試了所有我可以使用的東西，但似乎沒有任何效果可以下載
2 個解決方案
解決方案1
0 2020-10-16 15:53:06
感謝您的回答，我沒有找到推薦答案的解決方案。 我所做的是我創建了一個全新的頁面，而不是初始化一個 html iframe，我將當前窗口重定向到我創建的新頁面。 新頁面從“www.page.com/?page={value} 中獲取了一個變量，然后從那里下載了我需要的東西。它很混亂，但它可以工作，所以如果其他人有這個問題，如果你使用 wix，我建議你這樣做。
解決方案2
-1 2020-10-16 02:25:33
正如警告消息所說，如果沙盒 iframe 沒有allow-downloads權限，則無法從沙盒 iframe 初始化下載。
所有解決方案都意味着可以訪問顯示 iframe 的頁面（以下稱為“嵌入器”）。
最簡單和推薦的方式，
是要求嵌入器在定義 iframe 時添加此權限：
<iframe src="yourpage.html" sandbox="allow-scripts allow-downloads"></iframe>
另一種方法是要求他們根本不要沙箱該 iframe，
<iframe src="yourpage.html"></iframe>
但我想，如果他們這樣做了，那是因為他們不夠信任您的頁面。
最后一種更復雜的方法是將生成的文件傳遞回父窗口。
為此，您需要為您的客戶定義一個新的 API。
您顯然可以向他們message一個全局message事件，但我想最干凈的方法是讓他們通過MessageChannel的 MessagePort 以及myList數據，這樣他們就可以輕松地等待那里的響應，並確保他們只會捕獲響應，沒有其他不相關的消息。
所以在嵌入頁面他們會做
frame.onload = (evt) => {
const channel = new MessageChannel();
// handle the response from the iframe
channel.port2.onmessage = (evt) => {
const file = evt.data;
saveAs( file, "file.html" ); // the embedder is reponsible to initialize the download
};
frame.contentWindow.postMessage( embedders_data, [ channel.port1 ] );
};
在你的頁面中你會做
window.onmessage = (evt) => {
const myList = evt.data;
// get the MessageChannel's port out of the transfer-list
const port = evt.ports[ 0 ];
// buildHtmlTable has to return the final file, not to make it download
const file = buildHtmlTable( myList );
if( port ) {
port.postMessage( file ); // send back to embedder
}
};
將其視為實時 plnkr 。
Ps：請注意，您的文件不是 xlsx 文件，而是 HTML 標記。
在iFrame中下載並加載HTML文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.