2017-12-29 72 views
0

mPDFを使用してMathJax SVGをPDFに変換する際に問題が発生しました。MathJax + mPDF SVG式が表示されない

HTMLは、MPDFの例から単純な式です:何もない、最終的なPDFファイルに

example

しかし、もちろん:

\[ \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) \] 

ウィッヒはとしてレンダリングする必要があります。

HTMLをPHPファイルにPOSTで送信される

$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; 

それはのコピーです:POSTリクエストJSのコピー「幅」と「高さ」「スタイル」属性に属性の前にofficial mPDF example、かなりバギーは、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> 

そしてもちろん警告:ビューボックスのデータを読み込むとそれでも剛性値のPDFファイルと

[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 

それはpropablyだエラーが空のようです。エラーがなければ、SVGを無視します。私は昨日からこれに座っていて、私はまだ同じ場所にいます。 MathJaxはここにいるはずです。私はmPDFを何かに変更することを検討していますが、私はそれを避けることを好む。

いいえアイデアは、私は立ち往生しています。

最新MathJax/ MPDFのV7.0.0/ PHP:7.1.1/ PHP GD2拡張だから

答えて

2

を有効にし、私はそれを考え出しました。誰かが答えを探していた場合には(私たちは今、およそmPDF MathJaxProcess.phpファイルを話している)

  1. いまいましい塗りつぶし=「currentColor」 SVG内の属性は、MPDFでは動作しません。
  2. 例は完全に壊れています。

    • はMPDF sizeConverter内のNULLでエラーと警告を避けるために、まず、とSVGのスタイルをインライン化する属性高さをコピーする必要があります。私はJSを使ってhtmlでフォームを送信しました。これは実際にはlibのバグではなく例で誤っている。
    • 2行目、$ m [1] [$ i]はすべてを破った。変数はそれ自身の高さ属性を持ち、未変換値はex単位を使用します。これは、私たち自身の高さ属性との競合を作成し、通知ゼロ除算未定義のインデックス様およびが表示されます。MPDF上に固定した後

正しくMathJaxで動作しなければなりません。私はフォームを送る前にSVGをサニタイズしています。消毒によって私は意味:

  1. コピースタイルを
  2. スタイルをインラインフォーカス可能、アリア - 隠された、役割などの属性を削除する属性。重複コンテンツを避けるために.MJX_Assistive_MathMLクラスの要素を削除する#000
  3. グラムタグの属性を埋めるの設定(非数値)

かなり複雑なJSコードですが、あなたはそのアイデアを得るでしょう。

ループの最初のSVGをスキップしています。これは、PHPスクリプトのSVGタグに直接コピーされる定義しかないためです。あなたは、クロムまたはFirefoxで壊れたSVGを持っていれば :

<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> 

Related mPDF issue on Github

編集FirefoxのMPDFからレンダリングする場合 が期待するパラメータビューボックス クロームMPDFからレンダリングを期待していたパラメータビューボックス 大文字と小文字を区別します。私は今この虫を1週間から狩っていた。

関連する問題