admin管理员组

文章数量:1390618

I have a data table as below:

<table id="example2" class="table table-bordered table-striped table-fixed">
    <thead>
        <th>Key Account</th>
        <th>Key Account Code</th>
        <th>Potential Value</th>
        <th>Sales Value</th>
        <th>Penetration %</th>
        <th>Potential (H/M/L)</th>
        <th>Penetration (H/M/L)</th>
    </thead>
    <?php echo "Some data from database here";?>   
</table>

and I have a button as

<button id="click" >Export Image </button>

How to download the above data table as image after clicking the button?

I have a data table as below:

<table id="example2" class="table table-bordered table-striped table-fixed">
    <thead>
        <th>Key Account</th>
        <th>Key Account Code</th>
        <th>Potential Value</th>
        <th>Sales Value</th>
        <th>Penetration %</th>
        <th>Potential (H/M/L)</th>
        <th>Penetration (H/M/L)</th>
    </thead>
    <?php echo "Some data from database here";?>   
</table>

and I have a button as

<button id="click" >Export Image </button>

How to download the above data table as image after clicking the button?

  • javascript
  • php
  • html-table
Share Improve this question edited Dec 14, 2018 at 12:29 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Dec 13, 2018 at 8:43 AkshayaAkshaya 471 silver badge9 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 4

Yes You can use html2canvas. You can then export it to an image. See the script below :

<html>
   <head>
   </head>
   <body>
      <table id="myTable" class="table table-bordered table-striped table-fixed">
         <thead>
            <th>Key Account</th>
            <th>Key Account Code</th>
            <th>Potential Value</th>
            <th>Sales Value</th>
            <th>Penetration %</th>
            <th>Potential (H/M/L)</th>
            <th>Penetration (H/M/L)</th>
         </thead>
         <?php echo "Some data from database here";?>   
      </table>
      <button id="convert">
      Convert to image
      </button>
      <div id="result">
         <!-- Result will appear be here -->
      </div>
      <script type="text/javascript" src="https://github./niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
      <script>
         //convert table to image            
         function convertToImage() {
            var resultDiv = document.getElementById("result");
            html2canvas(document.getElementById("myTable"), {
                onrendered: function(canvas) {
                    var img = canvas.toDataURL("image/png");
                    result.innerHTML = '<a download="test.jpeg" href="'+img+'">test</a>';
                    }
            });
         }        
         //click event
         var convertBtn = document.getElementById("convert");
         convertBtn.addEventListener('click', convertToImage);
      </script>
   </body>
</html>

本文标签： javascriptDownloading data tables from HTML as imageStack Overflow

版权声明：本文标题：javascript - Downloading data tables from HTML as image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744628882a2616420.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。