Сохраняйте содержимое div в том виде, в котором оно отображается (не код, стоящий за всем этим)

Question

Используя это js Я могу сохранить содержимое div в виде файла ..

function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "test.csv";
    a.href = "data:text/csv charset=utf-8," + document.getElementById("mydiv").innerHTML;
    a.click();

затем на странице ..

</div><button onClick="download()">Download</button>

Моя проблема что я sh хочу сохранить содержимое div точно так, как оно отображается на странице (показано в браузере), но используя этот текущий метод, оно сохраняет разметку, включенную также.

Я пробовал ( и потерпел неудачу с) ..

1) document.getElementById('mydiv').innerText
2) document.getElementById('mydiv').textContent;
3) document.getElementById('mydiv').innerHTML.replace(/\s+/g, ' ');

Есть ли более простой способ сохранить то, что видно не то, что закодировано, чтобы сделать это таким образом ??

РЕДАКТИРОВАТЬ, ЧТОБЫ ДОБАВИТЬ ДОПОЛНИТЕЛЬНУЮ ИНФОРМАЦИЮ

Содержимое div просто необходимо сохранить в виде простого текста, точно так же как было бы, если бы я скопировал / вставил содержимое div в блокнот.

Это пример содержимого div ..

listing_id,title,description,price,quantity,taxonomy_id,shipping_template_id,shop_section_id,state,when_made,who_made,materials,tags,processing_min,processing_max,is_supply,is_customizable,non_taxable,sku,variations,images
,"TITLE","DESCRIPTION",2.49,99,1319,58517133942,,active,made_to_order,i_did,,"TAGS",1,2,0,0,0,SKU," [{
""Sticker Color"": ""Red"",
""Sticker Size"": ""SML 169x80mm"",
""price"": 2.30
}, {
""Sticker Color"": ""Red"",
""Sticker Size"": ""STD 190x90mm"",
""price"": 2.49
}, {
""Sticker Color"": ""Red"",
""Sticker Size"": ""MED 210x99mm"",
""price"": 3.49
}, {
""Sticker Color"": ""Red"",
""Sticker Size"": ""LRG 295x140mm"",
""price"": 5.49
}]","http://MyURL.com/a-black.png,http://MyURL.com/b-red.png,http://MyURL.com/c-green.png,http://MyURL.com/d-purple.png,http://MyURL.com/e-blue.png,http://MyURL.com/f-white.png,http://MyURL.com/g-yellow.png,http://MyURL.com/h-orange.png,http://MyURL.com/i-light-blue.png,http://MyURL.com/j-gold.png,http://MyURL.com/k-no-bg.png,http://MyURL.com/l-colour-options.png," 

множество частей выше генерируется с помощью ( на основе пользовательских данных) ...

document.getElementById("x").innerHTML = document.getElementById("y").innerHTML;

<span id="x"></span>

Проблема в том моменте, когда я сохраняю его, сохраненная версия включает в себя информацию <span id="x"></span>, а также текст т, что выводит.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Кажется, я на шаг ближе к ..

var range = document.createRange();
    range.selectNode(document.getElementById("x"));
    window.getSelection().addRange(range);
var p = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "test.csv";
    a.href = "data:text/csv charset=utf-8," + range;
    a.click(); 

, который в jsfiddle работает, как я хотел, однако при тестировании с большим количеством содержимого div (в 5 раз больше текста) загруженный файл обрезается после нескольких (5) строк. Есть идеи почему?

Answer 1

Если вы хотите загрузить его точно так же, как он отображается в браузере, вам нужно преобразовать HTML в изображение, а затем загрузить изображение.

Вы должны попытаться использовать некоторую существующую библиотеку, например эту : https://www.npmjs.com/package/html-to-image