如何将iframe中的div转换为svg代码? [英] How to convert a div inside an iframe into svg code?
问题描述
我有一个带有datatables表的简单html页面.该页面本身被用作另一个页面的iframe.现在，在该页面中，我能够正确获取表格html代码，但无法找到将其转换为svg代码的方法.我找到了所有尝试过的所有选项，但都失败了，因为我只想要div的SVG代码.我需要div的屏幕截图.我已经尝试过html2canvas，jspdf的选项，但是它们要么不起作用，要么给了我不需要的pdf或base64图像.这可能吗?我应该如何处理?
I have a simple html page with a datatables table. This page itself is being used as an iframe for another page. Now in that page I am able to get the table html code properly, but I cannot figure out a way to convert it into svg code. I found multiple options all of which I tried, but failed, because I just want the SVG code of my div. I need like a screenshot of the div . Options I have tried html2canvas, jspdf already, but they either dont work, or are giving me the pdf or base64 image which I don't want. Is this possible? How should I approach this??
我正在运行python服务器，以便可以完全访问iframe中的对象，并且不会出现任何权限问题.
I am running a python server just so I have complete access of the objects inside the iframe, and won't get any permissions issues.
这是我的简单文件:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts-3d.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/js/modules/exporting.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
var ifrmChart=undefined;
function getChart(){
ifrmChart = $('#example');
}
$(document).ready(function() {
$('#example').DataTable();
getChart();
} );
</script>
</head>
<body>
<div class="row" id="tableContainer">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
具有iframe的页面更加简单，它只有一个具有我先前文件的src的iframe.
The page which has the iframe is even simpler, it just has an iframe with the src of my previous file.
<span>
<h4>Table two title</h4>
<iframe id="ifrm3" src="table.html" width="500" height="300"></iframe>
</span>
我还使用了其他iframe，因为它们是highcharts对象，所以它们中包含svg代码.我使用该svg，然后使用库svg2pdf将其打印在pdf上.现在，我还需要一些html div和对象.我想，如果我可以将html转换为svg并合并它们，然后将其打印在pdf上，那么它将起作用.
I am also using other iframes, which have svg code in them as they are highcharts objects. I use that svg and then use the library svg2pdf to print it on a pdf. Now, I also need a few html divs and objects. I thought if i could convert the html to svg and merge them, and then print it on a pdf, it would work.
我的最终目标是从iframe中的图形中获取svg，并与转换后的html中的svg代码合并，将它们合并在一起，然后将其打印在pdf上.
My ultimate goal is to get the svg from the graphs inside the iframes, and merge with the svg code from the converted html, merge them together and print them on a pdf.
我应该怎么做?
推荐答案
我建议您看一下 pdfmake (我与他们没有任何隶属关系，但我有亲自使用它)，但它支持在几年前将base64数据插入pdf中，并且支持 jsPDF的图片示例，在他们的主页上，显示了使用他们的库将base64数据嵌入pdf中.同样，将图像输出到HTML画布的任何库都是可行的选项，因为可以将其导出到base64数据.
I would recommend taking a look at the Screen Capture API for a more modern approach than HTML2Canvas. The Screen Capture API is, of course, currently only supported by certain browsers, so HTML2Canvas can still be used as a fallback. As others have indicated, the base64 data is actually what you want. That is either png or jpeg data, and it could be embedded in a pdf using several client side pdf libraries nowadays. I haven't used pdfmake in a few years (I have no affiliations with them at all, but I have personally used it), but it supported inserting base64 data into a pdf years ago, and jsPDF's images example, on their homepage, shows embedding base64 data in a pdf using their library. Likewise, any library that will output an image to the HTML canvas is a viable option, as that can be exported to base64 data.
由于您同时控制了两个源(容器和iframe)，因此可以从iframe内部进行屏幕截图，然后仅将图像数据传递回父级(通过服务器或直接在客户端上，因为它们都在同一个域上) OR ，您可以从容器页面中获取屏幕截图，如果添加allow="display-capture"
到iframe标签，然后将PDF制作成一张图片.
Since you control both sources (container and iframe) you could either take the screen shot from inside the iframe, and then pass just the image data back to the parent (either via the server, or directly on the client, since they are both on the same domain) OR you can take the screen shot from the container page, if you add allow="display-capture"
to the iframe tag, and make the PDF out of a single image.
这篇关于如何将iframe中的div转换为svg代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
