将 dom 转换为 svg 图像并将其显示在 pdf 文件中

问题描述

我正在使用 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 我从 $data 全局变量中获取数据 URL($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 文件中工作？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dom-to-image javascript mpdf svg svg svg