Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
496 views
in Technique[技术] by (71.8m points)

javascript - How to download html table as csv along with images src

I have a table and i want to export it as csv but the table also has images. I know csv does not support images, but i want to get the src of the image and not the image file.

Example Table

<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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

you can download images and link in excel as below.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...