javascript - 如何将 iframe 内的 div 转换为 svg 代码？-6ren

javascript - 如何将 iframe 内的 div 转换为 svg 代码？

转载作者：行者123 更新时间：2023-12-02 22:08:01

我有一个带有数据表的简单 html 页面。该页面本身被用作另一个页面的 iframe。现在，在该页面中，我可以正确获取表格 html 代码，但我无法找到将其转换为 svg 代码的方法。我找到了多个选项，我都尝试过，但都失败了，因为我只想要我的 div 的 SVG 代码。我需要 div 的屏幕截图。选项我已经尝试过 html2canvas、jspdf，但它们要么不起作用，要么给我提供了我不想要的 pdf 或 base64 图像。这可能吗？我应该如何处理这个问题？

我正在运行 python 服务器，这样我就可以完全访问 iframe 内的对象，并且不会遇到任何权限问题。

这是我的简单文件:

<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 的页面更简单，它只有一个 iframe 和我之前文件的 src。

<span>
    <h4>Table two title</h4>
    <iframe id="ifrm3" src="table.html" width="500" height="300"></iframe>
</span>

我还使用其他 iframe，其中有 svg 代码，因为它们是 highcharts 对象。我使用该 svg，然后使用库 svg2pdf 将其打印为 pdf。现在，我还需要一些 html div 和对象。我想如果我可以将 html 转换为 svg 并合并它们，然后将其打印在 pdf 上，那就可以了。

我的最终目标是从 iframe 内的图形中获取 svg，并与转换后的 html 中的 svg 代码合并，将它们合并在一起并打印在 pdf 上。

我该怎么办？

最佳答案

我建议您查看Screen Capture API比 HTML2Canvas 更现代的方法。当然，Screen Capture API 目前仅受某些浏览器支持，因此 HTML2Canvas 仍然可以用作后备。正如其他人所指出的，base64 数据实际上就是您想要的。这是 png 或 jpeg 数据，现在可以使用多个客户端 pdf 库将其嵌入 pdf 中。我没用过pdfmake几年后(我与他们完全没有任何关系，但我个人使用过它)，但它在几年前就支持将base64数据插入到pdf中，并且jsPDF's images example，在他们的主页上，展示了使用他们的库将base64数据嵌入到pdf中。同样，任何将图像输出到 HTML Canvas 的库都是一个可行的选择，因为它可以导出到 base64 数据。

由于您控制两个源(容器和 iframe)，您可以从 iframe 内部获取屏幕截图，然后仅将图像数据传递回父级(通过服务器或直接在客户端上，因为它们都在同一个域中)或者您可以从容器页面截取屏幕截图，如果您添加 allow="display-capture"到 iframe 标签，并用单个图像制作 PDF。

关于javascript - 如何将 iframe 内的 div 转换为 svg 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59652136/