MathJax + mPDF SVG Уравнения не видны
У меня проблема с конвертированием MathJax SVG в PDF с использованием mPDF.
HTML — это простая формула из примера mPDF:
\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]
который должен быть представлен как:
Но, конечно, в окончательном PDF-файле ничего нет.
HTML отправляется POST в файл PHP
$path = (getenv('MPDF_ROOT')) ? getenv('MPDF_ROOT') : __DIR__;
require_once $path . '/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf(['debug' => false, 'allow_output_buffering' => true]);
$sizeConverter = new \Mpdf\SizeConverter($mpdf->dpi, $mpdf->default_font_size);
if (strpos($_REQUEST['bodydata'], 'id%3D%22MathJax_SVG_Hidden%22') === false) {
die('Hacking attempt');
}
$html = $_POST['bodydata'];
$html = urldecode($html);
preg_match('/<svg[^>]*>\s*(<defs.*?>.*?<\/defs>)\s*<\/svg>/', $html, $m);
$defs = $m[1];
$html = preg_replace('/<svg[^>]*>\s*<defs.*?<\/defs>\s*<\/svg>/', '', $html);
$html = preg_replace('/(<svg[^>]*>)/', "\\1" . $defs, $html);
preg_match_all('/<svg([^>]*)style="(.*?)"/', $html, $m);
for ($i = 0; $i < count($m[0]); $i++) {
$style = $m[2][$i];
preg_match('/width: (.*?);/', $style, $wr);
$w = $sizeConverter->convert($wr[1], 0, $mpdf->FontSize) * $mpdf->dpi / 25.4;
preg_match('/height: (.*?);/', $style, $hr);
$h = $sizeConverter->convert($hr[1], 0, $mpdf->FontSize) * $mpdf->dpi / 25.4;
$replace = '<svg' . $m[1][$i] . ' width="' . $w . '" height="' . $h . '" style="' . $m[2][$i] . '"';
$html = str_replace($m[0][$i], $replace, $html);
}
if ($_POST['PDF'] === 'PDF') {
$stylesheet = '
img {
vertical-align: middle;
}
.MathJax_SVG_Display {
padding: 1em 0;
}
#mpdf-create {
display: none;
}
';
$mpdf->WriteHTML($stylesheet, 1);
$mpdf->WriteHTML($html);
$mpdf->Output();
}
exit;
Это копия: официальный пример mPDF, довольно глючный, перед запросом POST JS скопирует атрибуты ‘width’ и ‘height’ в атрибут ‘styles’, чтобы mPDF мог правильно его прочитать.
Сгенерированный SVG:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="35.62ex" height="7.841ex" style="vertical-align: -3.082ex; width: 35.62ex; height: 7.841ex;" viewBox="0 -2049.4 15336.2 3376.2"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><use xlink:href="#MJSZ4-28"></use><g transform="translate(792,0)"><use xlink:href="#MJSZ2-2211" x="0" y="0"></use><g transform="translate(85,-1110)"><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-3D" x="521" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-31" x="1300" y="0"></use></g><use transform="scale(0.707)" xlink:href="#MJMATHI-6E" x="721" y="1627"></use><g transform="translate(1611,0)"><use xlink:href="#MJMATHI-61" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="748" y="-213"></use></g><g transform="translate(2609,0)"><use xlink:href="#MJMATHI-62" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="607" y="-213"></use></g></g><use xlink:href="#MJSZ4-29" x="4300" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-32" x="7202" y="2090"></use><use xlink:href="#MJMAIN-2264" x="5824" y="0"></use><g transform="translate(6880,0)"><use xlink:href="#MJSZ4-28"></use><g transform="translate(792,0)"><use xlink:href="#MJSZ2-2211" x="0" y="0"></use><g transform="translate(85,-1110)"><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-3D" x="521" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-31" x="1300" y="0"></use></g><use transform="scale(0.707)" xlink:href="#MJMATHI-6E" x="721" y="1627"></use><g transform="translate(1611,0)"><use xlink:href="#MJMATHI-61" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-32" x="748" y="488"></use><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="748" y="-463"></use></g></g><use xlink:href="#MJSZ4-29" x="3401" y="0"></use></g><g transform="translate(11241,0)"><use xlink:href="#MJSZ4-28"></use><g transform="translate(792,0)"><use xlink:href="#MJSZ2-2211" x="0" y="0"></use><g transform="translate(85,-1110)"><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-3D" x="521" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-31" x="1300" y="0"></use></g><use transform="scale(0.707)" xlink:href="#MJMATHI-6E" x="721" y="1627"></use><g transform="translate(1611,0)"><use xlink:href="#MJMATHI-62" x="0" y="0"></use><use transform="scale(0.707)" xlink:href="#MJMAIN-32" x="607" y="488"></use><use transform="scale(0.707)" xlink:href="#MJMATHI-6B" x="607" y="-463"></use></g></g><use xlink:href="#MJSZ4-29" x="3301" y="0"></use></g></g></svg>
И конечно предупреждения:
[29-Dec-2017 21:42:39 UTC] PHP Notice: Undefined index: x in D:\Praca\ENVIROMENTS\laragon-apache\laragon\www\wp-content\plugins\szalpdf\pdf\vendor\mpdf\mpdf\src\Image\Svg.php on line 3027
[29-Dec-2017 21:42:39 UTC] PHP Notice: Undefined index: y in D:\Praca\ENVIROMENTS\laragon-apache\laragon\www\wp-content\plugins\szalpdf\pdf\vendor\mpdf\mpdf\src\Image\Svg.php on line 3027
[29-Dec-2017 21:42:39 UTC] PHP Notice: Undefined index: w in D:\Praca\ENVIROMENTS\laragon-apache\laragon\www\wp-content\plugins\szalpdf\pdf\vendor\mpdf\mpdf\src\Image\Svg.php on line 3027
[29-Dec-2017 21:42:39 UTC] PHP Notice: Undefined index: h in D:\Praca\ENVIROMENTS\laragon-apache\laragon\www\wp-content\plugins\szalpdf\pdf\vendor\mpdf\mpdf\src\Image\Svg.php on line 3027
[29-Dec-2017 21:42:39 UTC] PHP Warning: Division by zero in D:\Praca\ENVIROMENTS\laragon-apache\laragon\www\wp-content\plugins\szalpdf\pdf\vendor\mpdf\mpdf\src\Tag.php on line 4015
Возможно, это ошибка при чтении данных ViewBox, но даже при жестких значениях PDF-файл кажется пустым. Без ошибок просто игнорирует SVG. Я сидел с этим со вчерашнего дня, и я все еще на том же месте. MathJax должен быть здесь. Я рассматриваю возможность изменения mPDF на что-то другое, но я предпочитаю избегать этого.
Нет идей, я застрял.
Последний MathJax /
mPDF v7.0.0 /
PHP: 7.1.1 /
Расширение PHP GD2 включено
Решение
Итак, я понял это. Если кто-то искал ответ (мы говорим сейчас о mPDF MathJaxProcess.php файл)
- Черт заполнить = «currentColor» атрибут в SVG не работает в mPDF.
-
Примеры полностью разбиты.
- Во-первых, чтобы избежать ошибок и предупреждений с NULL в mPDF sizeConverter, вы должны скопировать ширина а также рост атрибуты для встроенных стилей SVG. Я сделал это с помощью JS перед отправкой формы с HTML. Это на самом деле ошибка в примере, а не ошибка lib.
- Второе, строка 29, $ М [1] [$ я] ломает все. У переменной есть своя ширина а также рост атрибут, с неконвертированными значениями, использующими бывшие единицы. Это создает конфликт с нашими собственными ширина а также рост атрибут, а затем замечает, как Неопределенный индекс а также Деление на ноль появляется.
После исправления выше mPDF должен корректно работать с MathJax. Я также дезинфицирую SVG перед отправкой формы. Под дезинфекцией я подразумеваю:
- Копировать атрибуты стилей во встроенные стили
- Удалите атрибуты, такие как фокусируемые, скрытые от арии, роли. (Не числовые значения)
- Установка атрибута заполнения г теги к # 000
- Удаление .MJX_Assistive_MathML Элемент класса, чтобы избежать дублирования контента.
Довольно грязный код JS для этого, но вы поймете идею.
Мы пропускаем первый SVG в нашем цикле, и это потому, что в нем есть только определения, которые будут скопированы непосредственно в тег SVG в сценарии PHP.
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG">
MathJax.Hub.Register.StartupHook("End",function () {
var list = document.getElementsByTagName("svg");
for (var i = 1; i < list.length; i++) {
var w = list[i].getAttribute("width");
var h = list[i].getAttribute("height");
list[i].style.width = w;
list[i].style.height = h;
list[i].removeAttribute("focusable");
list[i].removeAttribute("aria-hidden");
list[i].removeAttribute("role");
}
var gList = document.getElementsByTagName("g");
for (var i = 0; i < gList.length; i++) {
gList[i].setAttribute("fill", "#000");
}
document.querySelectorAll(".MJX_Assistive_MathML").forEach(function(a){
a.remove()
});
document.getElementById("bodydata").value=encodeURIComponent(document.body.innerHTML);
var el = document.getElementById("pdfform");
el.submit();
});
</script>
Связанная проблема mPDF на Github
Редактировать:
Если у вас сломан svg в chrome или firefox:
При рендеринге из Firefox mPDF ожидает параметр ViewBox
При рендеринге из Chrome mPDF ожидает параметр Viewbox
Это чувствительно к регистру. Я охотился на эту ошибку с недели сейчас.
Другие решения
Других решений пока нет …