时间戳

首页 > 解决方案 > 如何将html表格下载为csv以及图像src

javascript - 如何将html表格下载为csv以及图像src

问题描述

我有一张表，我想将其导出为 csv，但该表也有图像。我知道 csv 不支持图像，但我想获取图像的 src 而不是图像文件。

示例表

<table>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>Student</td>
        <td><img src="xyz.com/image.png"></td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>Teacher</td>
        <td><img src="abc.com/image.png"></td>
      </tr>
    </tbody>
 </table>

标签： javascripthtmljquery

解决方案

您可以在 excel 中下载图像和链接，如下所示。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>


function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}
</script>
</head>
<body>
<iframe id="txtArea1" style="display:none"></iframe>
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
<table id="headerTable">
    <tbody> 
    
   

      <tr>
        <td>John Doe</td>
        <td>Student</td>
        
        <td style=display:none><a href="https://www.w3schools.com/html/img_girl.jpg" target="_blank"/>Download Image</td>
        <td><img src="https://www.w3schools.com/html/img_girl.jpg" style="height:100px"></td>
     </tr>
        
   

      <tr>
        <td>Jane Doe</td>
        <td>Teacher</td>
        
          <td style=display:none><a href="https://www.w3schools.com/html/img_girl.jpg" target="_blank"/>Download Image</td>
        <td><img src="https://www.w3schools.com/html/img_girl.jpg" style="height:100px"></td>
     </tr>
    
    
    </tbody>
 </table>

</body>
</html>

推荐阅读