Wkhtmltopdf отсутствуют пути SVG (рендеринг)
Я использую изображение внутри кода HMTL, как показано ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
</head>
<body>
<svg height = "291pt" version = "1.1" viewBox = "0 0 291 291" width = "291pt" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"> <defs> <style type = "text/css">*{stroke-linecap:butt;stroke-linejoin:round;} </style> </defs> <g id = "figure_1"> <g id = "patch_1"> <path d = "M 0 291.4 L 291.4 291.4 L 291.4 0 L 0 0 z" style = "fill:none;"></path> </g> <g id = "axes_1"> <g id = "line2d_1"> <path clip-path = "url(#p6e64365aaf)" d = "M 268.427273 145.7 L 207.063636 251.984936 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_2"> <path clip-path = "url(#p6e64365aaf)" d = "M 248.397453 148.307103 L 199.306544 233.335052 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_3"> <path clip-path = "url(#p6e64365aaf)" d = "M 207.063636 251.984936 L 84.336364 251.984936 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_4"> <path clip-path = "url(#p6e64365aaf)" d = "M 84.336364 251.984936 L 22.972727 145.7 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_5"> <path clip-path = "url(#p6e64365aaf)" d = "M 92.093456 233.335052 L 43.002547 148.307103 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_6"> <path clip-path = "url(#p6e64365aaf)" d = "M 22.972727 145.7 L 84.336364 39.415064 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_7"> <path clip-path = "url(#p6e64365aaf)" d = "M 84.336364 39.415064 L 207.063636 39.415064 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_8"> <path clip-path = "url(#p6e64365aaf)" d = "M 96.609091 55.457845 L 194.790909 55.457845 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id = "line2d_9"> <path clip-path = "url(#p6e64365aaf)" d = "M 207.063636 39.415064 L 268.427273 145.7 " style = "fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> </g> </g> <defs> <clipPath id = "p6e64365aaf"> <rect height = "270" width = "270" x = "10.7" y = "10.7"></rect> </clipPath> </defs></svg>
</body>
</html>Когда я использую wkhtmltopdf для преобразования его в PDF, некоторые пути SVG отсутствуют. У кого-нибудь была такая же проблема? Какое решение этой проблемы?
Я попытался использовать относительный путь, полный путь, исходный код base64 и SVG отдельно в коде (как в примере).
версия wkhtmltopdf: 0.12.4
Ответы 2
Так что это не точное решение, но гораздо лучшая альтернатива сейчас - это использовать chrome в безголовом режиме.
$ chrome --headless --disable-gpu --print-to-pdf test.html
[0427/011400.636954:WARNING:dns_config_service_posix.cc(174)] dns_config has unhandled options!
[0427/011400.638406:ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context.
[0427/011400.801881:INFO:headless_shell.cc(586)] Written to file output.pdf.
Также, если вы хотите лучше контролировать процесс, вы должны использовать NodeJS и кукловод.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'hn.pdf', format: 'A4'});
await browser.close();
})();
Большое спасибо, но мне действительно нужно использовать Wkhtmltopdf, потому что это всего лишь часть большого документа, который конвертируется из html в pdf на Python (jinja2 / pdfkit).
Тогда я предлагаю вам открыть ошибку в этом репо, также у chrome puppeteer есть привязки python, если я не ошибаюсь
Я сделал это, но до сих пор нет ответа. Я поищу гугл-кукольника.
@IurySousa, если вы чувствуете, что этот ответ поможет, не забудьте назначить награду до истечения ее срока.
Обходной путь - преобразовать файлы .SVG в файлы .PNG перед преобразованием в .PDF. Код .SVG можно извлечь через AgilityPack или прочитать файлы как строку. Затем используйте Библиотека SVG для преобразования в .PNG следующим образом:
var svg = SvgDocument.FromSvg<SvgDocument>(svgXmlAsString);
var bitmap = svg.Draw();
var codec = "image/png".ParseImageCodecInfo();
// intermediaryStream required due to image.Save attempting read access
using (var intermediaryStream = new MemoryStream())
{
bitmap.Save(intermediaryStream, codec);
intermediaryStream.Position = 0;
await intermediaryStream.CopyToAsync(responseStream);
await intermediaryStream.FlushAsync();
await responseStream.FlushAsync();
}
Спасибо @Joshcodes. Оказалось, что я больше не участвую в этом проекте, но ваше решение очень похоже на то, что мы сделали. Мы искали способ сохранить в формате SVG из соображений качества печати. Также мы помещали изображения на разделенный стол с разными цветами строк. Это означает, что нам нужно использовать альфа-канал для цвета фона PNG. Но в любом случае это сработало.
Спасибо за ответ. У нас была очень похожая ситуация с качеством печати и альфа-фоном.
Я не уверен, поможет ли это, но похоже, что новые версии из wkhtmltopdf (bitbucket) решили эту проблему.