Преобразование dom в изображение svg и отображение его в файле pdf

Я использую библиотеку dom-to-image для преобразования таблицы HTML в изображение SVG и отображения этого изображения в файле pdf с помощью библиотеки MPDF позже.

HTML Эта таблица является примером

      <table id="tableId"> 
<tr> 
  <td> 1row1column </td>
  <td> 1row2column </td>
</tr>
<tr> 
  <td> 2row1column </td>
  <td> 2row2column </td>
</tr>
</table> 

Javascript Здесь я использую функцию toSvg библиотеки dom-to-image для преобразования dom в изображение в формате SVG, отправляя URL-адрес данных на серверную сторону с помощью ajax:

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
   var node = document.getElementById('tableId');
            function filter (node) {
                return (node.tagName !== 'i');
            }
            domtoimage.toSvg(node).then(dataUrl => {
                domtoimage.toSvg(node, {
                    quality: 1.0,
                    bgcolor: "white",
                    filter: filter /* , width: "900px", */
                }).then(
                    dataUrl2 => {

                        // var link = document.createElement('a');
                        // link.download = 'actual.svg';
                        // link.href = dataUrl2;
                        // link.click();

                        $.ajax(
                            'download.php',
                            {
                                data: {
                                    image: dataUrl2,
                                    imageName:"textContainer.svg"
                                },
                                type: "POST",
                                success: function (data) {
                                    console.log(data.message);
                                },
                                error: function () {
                                    console.log(data.message);
                                    //  alert('There was some error performing the AJAX call!');
                                },
                                beforeSend: function () {
                                    //  alert('There was some error performing the AJAX call!');
                                },
                            }
                        );
                    }
                )
            }).catch(function (error) {
                console.error('oops, something went wrong!', error);
            });

PHP Я получаю URL-адрес данных ( $data) и imageName ( $imageName) из $_POST глобальная переменная, удаляя все до <svg> тег и удаление %0A строка, с которой у меня возникла проблема в начале, поместив содержимое в файл SVG:

      $data = $_POST['image'];
$imageName = $_POST['imageName'];
$svgData = str_replace('data:image/svg+xml;charset=utf-8,', '', $data);
$svgData = str_replace('%0A', '', $svgData);
file_put_contents("/tables/" . $imageName, $svgData);

Файл загружается, и файл SVG отображается в Opera, Firefox, Microsoft Edge без каких-либо проблем, но когда дело доходит до добавления этого файла SVG в pdf или в любой другой редактор векторной графики, такой как Inkscape, изображение SVG не работает.

Вопрос: можно ли обойтись без какой-либо библиотеки? и если есть библиотека для правильного выполнения этого, можем ли мы заставить SVG работать и в файлах pdf?

0 ответов

Другие вопросы по тегам