如何解决将 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 举报,一经查实,本站将立刻删除。