Я пытаюсь экспортировать сложный блок SVG (сгенерированный с помощью c3) с моего сайта в виде изображения (будь то png, svg, pdf), на данный момент я открыт для всего, что решает его, хотя векторный формат будетбыть идеальным).Я пробовал html2canvas, canvg, jsPDF и всех классных ребят из этой банды.Проблема в том, что один из моих сюжетов облажался.Линия становится областью, области переворачиваются, цвета разрушаются, ... вы называете это.
Я довольно далеко от того, чтобы быть экспертом JS.Я только что пришел сюда, и я нахожу свой путь, некоторые, пожалуйста, терпите меня.
Я не знаю, является ли это проблемой CSS или чем-то другим.Да, у нас есть CSS за html.
Мое временное решение - использовать jQuery.print.js для вызова распечатки моего div.Это далеко от идеала по многим причинам:
Нет bbox.Он генерирует PDF с размером страницы, определяемым пользователем, а не размером изображения;
Я использую загрузочные карты с автоматическим изменением размера.Всякий раз, когда нажимается «печать изображения», печать использует текущий размер.Я пытался скрыть карты, чтобы изменить их масштаб, но изменение размера будет происходить только ПОСЛЕ печати, по неизвестным мне причинам.Если эта проблема решена, это временное решение будет лучше, хотя все еще временно.
Итак, один вопрос:
- как получить SVGкак показано?
- В качестве альтернативы, как изменить размер карты ДО того, как будет напечатана печать?
- Или, как создать растр (png / jpeg) без ошибок форматирования, полученных из canvg / jsPDF?
Функция, выполняющая вызов для печати на данный момент:
function getscreenshot(div) {
// Hide row pair:
$('#map-card').addClass('hidden');
// Temporarily change class attr to spawn all row:
var divClass = $(div).attr('class');
$(div).attr('class', 'col');
// ****PROBLEM****
// Div size is not upated before calling print()
// causing the print to have the size as displayed on user screen
// How to refresh it before print?
// ********
// jQuery.print solves it in a non-ideal way, since user has to set save as file and so on
$(div).print();
// This solution with jsPDF produces **ugly as hell** image:
// var pdf = new jsPDF('landscape');
// pdf.addHTML(document.getElementById(div), function() {
// pdf.save(name + 'pdf');
// });
// Recover original size after print:
// Restore row pair and div original state:
$('#map-card').removeClass('hidden');
$(div).attr('class', divClass);
}
Вот ряд карточек, как показано на веб-странице: 
Сюжет справа - тот, на котором я сфокусировал свои попытки, и тот, который завершается неформатированным.Проверьте, что получится с помощью html2canvas, jsPDF и тому подобного, и получите ту же ошибку, что и в скрипте с SVG-вставкой , с использованием canvg.js
PS: Да, я много искал,Вот так я и попробовал html2canvas, canvg, jsPDF, jqprint, ...
Ура!