How to convert a div inside an iframe into svg code? [duplicate]

问题

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??

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.

Here is my simple file:

<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>

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>

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.

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.

How should I go about this ?

回答1:

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.

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.

来源：https://stackoverflow.com/questions/59652136/how-to-convert-a-div-inside-an-iframe-into-svg-code

标签

javascript

jquery

html

svg

canvas