1

我正在使用 dom-to-image 库将 HTML 表转换为 SVG 图像，并稍后使用 MPDF 库在 pdf 文件中显示该图像。

HTML 此表是一个示例

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

Javascript 这里我使用 dom-to-image 库的 toSvg 函数将 dom 转换为 SVG 格式的图像，使用 ajax 将数据 URL 发送到服务器端：

<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( )，删除标记之前的所有内容并删除我一开始遇到问题的字符串，将内容放入 SVG 文件：$imageName$_POST<svg>%0A

$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 文件中工作吗？

4

0 回答 0