HTML IFrame不允许下载文件
我正在尝试下载一个基于它接收到的值构建自身的文件。这是我的代码
<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>代码本身可以工作，但我得到的错误是"Download is disallowed。初始化或实例化下载的帧是沙箱的，但没有设置‘allow-downloads’标志。有关更多详细信息，请参阅https://www.chromestatus.com/feature/5706745674465280。“
我能做些什么来解决这个问题？我感觉我试了所有我能拿到的东西，但似乎都不能下载它
回答 2
Stack Overflow用户
发布于 2020-10-16 10:25:34
正如警告消息所说，如果沙盒iframe没有allow-downloads权限，则无法从它初始化下载。
所有的解决方案都意味着可以访问显示iframe的页面(以下称为“嵌入器”)。
最简单和推荐的方法是，
是要求嵌入器在定义其iframe时添加此权限：
<iframe src="yourpage.html" sandbox="allow-scripts allow-downloads"></iframe>另一种方法是要求他们根本不用沙箱保护iframe，
<iframe src="yourpage.html"></iframe>但我猜，如果他们这样做了，那是因为他们不够信任你的页面。
最后，一种更复杂的方法是将生成的文件传回父窗口。
为此，您需要为您的客户端定义一个新的API。
显然，您可以向它们返回一个全局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
}
};将其视为live plnkr。
Ps:请注意，您的文件不是xlsx文件，而是HTML标记。
Stack Overflow用户
发布于 2020-10-16 23:53:06
谢谢你的回答，我没有找到推荐答案的解决方案。我所做的是创建一个全新的页面，而不是初始化html iframe，而是将当前窗口重定向到我创建的新页面。这个新的页面从"www.page.com/? page ={value}“中获取了一个变量，并从那里下载了我需要的东西。它很乱，但它可以工作，所以如果其他人有这个问题，如果你正在使用wix，我推荐这个。
https://stackoverflow.com/questions/64375690
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号