Javascript 以图像形式从HTML下载数据表_Javascript_Php_Html Table

Javascript 以图像形式从HTML下载数据表

javascript php

Javascript 以图像形式从HTML下载数据表,javascript,php,html-table,Javascript,Php,Html Table,我的数据表如下： <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>

我的数据表如下：

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


大客户
大客户代码
潜在价值
销售价值
渗透率%
电位（H/M/L）
贯入度（H/M/L）

我有一个按钮

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

导出图像

单击按钮后如何将上述数据表作为图像下载？

是，您可以使用。然后可以将其导出为图像。请参见下面的脚本：

<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.com/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>


大客户
大客户代码
潜在价值
销售价值
渗透率%
电位（H/M/L）
贯入度（H/M/L）
转换为图像
//将表格转换为图像
函数convertToImage（）{
var resultDiv=document.getElementById（“结果”）；
html2canvas（document.getElementById（“myTable”）{
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/png”）；
result.innerHTML=''；
}
});
}        
//点击事件
var convertBtn=document.getElementById（“convert”）；
convertBtn.addEventListener（'click'，convertToImage）；

那么如何下载该图像我更新我的代码你只需添加'var url=img.replace（/^data:image\/[^；]+/，'data:application/octet stream'）；窗口。打开（url）；`别忘了标记为答案以帮助人们这是下载一些未知格式的图像。我想下载jpeg格式的图像