Вопросы Теги

Угловой 6 - Экспорт SVG из DOM [дубликат]

Используя ваш код, проблема в том, что вы не дождались назначения сокета для запроса, прежде чем пытаться установить материал на объект сокета. Это все async так: 

var options = { ... }
var req = http.request(options, function(res) {
  // Usual stuff: on(data), on(end), chunks, etc...
});

req.on('socket', function (socket) {
    socket.setTimeout(myTimeout);  
    socket.on('timeout', function() {
        req.abort();
    });
});

req.on('error', function(err) {
    if (err.code === "ECONNRESET") {
        console.log("Timeout occurs");
        //specific error treatment
    }
    //other error treatment
});

req.write('something');
req.end();

Событие 'socket' запускается, когда запросу присваивается объект сокета.

33
задан Hooked 31 March 2015 в 03:42
поделиться

3 ответа

Есть 5 шагов. Я часто использую этот метод для вывода inline svg.

  1. получить inline svg-элемент для вывода.
  2. получить источник svg с помощью XMLSerializer.
  3. добавить пространства имен svg и xlink.
  4. построить схему данных url из svg методом encodeURIComponent.
  5. установить этот url в атрибут href некоторого элемента «a» и нажать правой кнопкой эту ссылку, чтобы загрузить svg файла. 
//get svg element.
var svg = document.getElementById("svg");

//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);

//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}

//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);

//set url value to a element's href attribute.
document.getElementById("link").href = url;
//you can download svg file by right click menu.
40
ответ дан defghi1977 15 August 2018 в 20:51
поделиться
  • 1
    Спасибо за ответ! Это загружает SVG для меня, хотя все становится черным, а окраска очень странная. Почему это? Вы можете видеть, что я имею в виду на своем веб-сайте, я применил ваш предложенный код: servers.binf.ku.dk/hemaexplorerbeta - Просто нажмите & quot; submit & quot; а затем «экспортный график». большое спасибо – Vanquiza 22 April 2014 в 13:20
  • 2
    Этот пример - простой случай. Если вы используете css-стиль для внешних файлов css по элементу ссылки, ссылка на svg и таблицу стилей была нарушена. Таким образом, эта проблема будет решена путем добавления данных стилей к inline svg. – defghi1977 22 April 2014 в 13:32
  • 3
    «Таким образом, эта проблема будет решена путем добавления данных стиля к inline svg. & quot; Можете ли вы объяснить это мне по-другому? Я не совсем понимаю. – Vanquiza 22 April 2014 в 14:59
  • 4
    См. w3.org/TR/SVG11/styling.html#ReferencingExternalStyleSheets Итак, добавьте & lt;? Xml-stylesheet href = & quot; xxx.css & quot; тип = & Quot; текст / CSS & Quot;? & GT; и конвертировать, но в этом случае файл svg не будет автономным. – defghi1977 22 April 2014 в 15:41
  • 5
    Примечание. Это больше не работает в Chrome или Firefox, поскольку они оба теперь блокируют URI данных для SVG при использовании на верхнем уровне. – Undistraction 17 March 2018 в 20:32

Я знаю, что на это уже был дан ответ, и этот ответ хорошо работает большую часть времени. Однако я обнаружил, что это не удалось в Chrome (но не в Firefox), если изображение svg было большим (примерно 1 МБ). Он работает, если вы вернетесь к использованию конструкции Blob, как описано здесь здесь и здесь . Единственное отличие - это аргумент типа. В моем коде я хотел нажать одну кнопку, чтобы загрузить svg для пользователя, который я выполнил с помощью: 

var svgData = $("#figureSvg")[0].outerHTML;
var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "newesttree.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
27
ответ дан Community 15 August 2018 в 20:51
поделиться
  • 1
    Это очень хорошо работало в Chrome! Я бы дал +100 за этот простой ответ! – kashiraja 12 May 2017 в 19:55
  • 2
    Похоже, что он работает без добавления и удаления downloadLink в document.body – piotr_cz 22 August 2017 в 10:26
  • 3
    .outerHTML не работает в Internet Explorer. Но вы можете использовать XMLSerializer() как defghi1977 . Все остальное сохраняет то же самое. – roland 23 October 2017 в 13:06
  • 4
    Хорошая альтернатива XMLSerializer ()! – V. Rubinetti 14 May 2018 в 04:03

Сочетание ответов Дэйва и Дегги1977. Вот многократно используемая функция: 

function saveSvg(svgEl, name) {
    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    var svgData = svgEl.outerHTML;
    var preface = '<?xml version="1.0" standalone="no"?>\r\n';
    var svgBlob = new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"});
    var svgUrl = URL.createObjectURL(svgBlob);
    var downloadLink = document.createElement("a");
    downloadLink.href = svgUrl;
    downloadLink.download = name;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

Пример вызова: 

saveSvg(svg, 'test.svg')
6
ответ дан senz 15 August 2018 в 20:51
поделиться
Другие вопросы по тегам:

Похожие вопросы: