Загрузка содержимого файла в виде отдельного HTML-файла

Question

В настоящее время я создаю построитель шаблонов перетаскивания, позволяя пользователю выбирать предварительно заполненный контент и заказывать его внутри окна браузера. Затем я хотел бы, чтобы пользователь мог заново заполнять отдельный файл HTML/Zip.

Это похоже на функциональность, используемую в построителе шаблонов MailChimp.

Тем не менее, я нажимаю границы своего набора навыков и ищу помощь в получении содержимого нового населенного пункта, доступного для загрузки пользователем. Я здесь, чтобы узнать, что любой совет будет более чем оценен.

Есть ли у кого-нибудь идеи?

Спасибо!

Answer 1

Вы можете использовать якорь с схемой «данные:», например. с содержанием как

<div id="content"> 
    <h1>Hello world</h1> 
    <i>Hi everybody</i> 
</div> 

вы можете использовать скрипт:

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/

Answer 2

IE поддержки dosen't html5 'загрузить' атрибут, следовательно, выше решение не работает на IE11. Пожалуйста, смотрите ниже обходной путь, взятый из следующих StackOverflow Question https://stackoverflow.com/a/39977048/3300541

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