关于jquery:将a的内容下载为单独的HTML文件

 2022-01-08 

Downloading the content of a <div> as a separate HTML file

我目前正在构建一个拖放模板构建器,允许用户选择预先填充的内容并在浏览器窗口中对其进行排序。然后我希望用户能够将新填充为单独的 HTML/Zip 文件。

它类似于 MailChimp 模板生成器中使用的功能。

但是,我正在突破我的技能范围,并寻求帮助以获取可供用户下载的新填充内容。我是来学习的,所以任何建议都将不胜感激。

有人有什么想法吗?

谢谢!


您可以将锚点与 "data:" 架构一起使用,例如内容如

1
2
    Hello world
    Hi everybody

你可以使用脚本:

1
2
3
4
5
6
var a = document.body.appendChild(
        document.createElement("a")
    );
a.download ="export.html";
a.href="data:text/html," + document.getElementById("content").innerHTML;
a.innerHTML ="[Export conent]";

要将 DIV 内容导出到文件中:http://jsfiddle.net/BHeMz/


IE 不支持 html5 的 \\'download\\' 属性,因此上述解决方案不适用于 IE11。请参阅下面的解决方法,取自以下 stackoverflow 问题
https://stackoverflow.com/a/39977048/3300541

1
2
3
4
5
6
7
8
9
10
if (navigator.msSaveBlob) { // IE
    navigator.msSaveBlob(new Blob([content], { type: 'text/html;charset=utf-8;' }), fileName);
} else {
    var download_link = document.createElement('a');
    download_link.href = 'data:text/html;charset=utf-8,' + encodeURIComponent(content);;
    download_link.download = fileName;
    document.body.appendChild(download_link);
    download_link.click();
    document.body.removeChild(download_link);
}