Question

我使用以下两个JS函数来执行以下步骤：将通过用户交互生成的iFrame html内容转换为字符串然后获取名为＆＃34; myStylesheet.css＆＃34;的服务器上包含的CSS样式表。成一个字符串然后将这些文件下载到对方用户

var iframe = document.getElementById('frame');

function downloadFile(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);

if (document.createEvent) {
    var event = document.createEvent('MouseEvents');
    event.initEvent('click', true, true);
    pom.dispatchEvent(event);
}
else {
    pom.click();
}
//example : downloadFile("hello.txt", "Hello World!") or for custom name filedownloadFile(myPageName +'.html', iFrameContent)
}

function publishWebsite(){
var htmlCodeForFrame = document.getElementById('frame').contentWindow.document.body.innerHTML;
var ccsCodeForFrame = "";
downloadFile("myWebsite.html", htmlCodeForFrame); //save html of frame into a file and download it to user
downloadFile("myStylesheet.css", ccsCodeForFrame); //save css of frame into a file and download it to user
}

我的问题在于将CSS样式表转换为变量然后下载它（为了清晰起见，我希望坚持使用我的下载功能，因为这是一个团队项目，并且它已在许多其他地方使用过。）到用户。我希望这可以在Javascript中完成。

Answer 1

对于现代浏览器，您可以使用download - 标记

<a href="{your url}" download="{file name}">Download</a>

N.B：不需要文件名

（见browser support）

另一个（相当讨厌的）技巧是使用无效的MIME类型创建ajax请求，这会提示浏览器下载文件，因为它无法呈现视图。或者您可以使用application/octet-stream MIME类型。

Answer 2

我发现自己经过一些修补后会使用以下内容：

 <iframe id="cssFrame" src="myStylesheet.css"  style="display: none;"></iframe>

结合第一篇文章中的代码，我将iframe的内容保存到字符串中，并将字符串保存在扩展名为.css的文件中。效果很好。

让用户下载iframe元素的CSS文件

2 个答案: