How to download html table as csv along with images src

Viewed 497

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

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>

For anyone who reads this in the future without having Excel and who wants to get the data formatted as CSV. This is how to do that:

let rows = document.getElementsByTagName('tr');

let cells;
let csv = "";

let csvSeparator = ";"; // Sets the separator between fields
let quoteField = true; // Adds quotes around fields

let regex = /.*<img.*src="(.*?)"/i

for (let row = 0; row < rows.length; row++) {
  cells = rows[row].getElementsByTagName('td');
  if (cells.length === 0) {
    cells = rows[row].getElementsByTagName('th');
  }
  for (let cell = 0; cell < cells.length; cell++) {
    if (quoteField) { csv += '"'; }
    
    if (regex.test(cells[cell].innerHTML)) {
      csv += cells[cell].innerHTML.match(regex)[1];
    } else {
      csv += cells[cell].innerText;
    }
    
    if (quoteField) { csv += '"'; }
    
    if (cell === cells.length - 1) {
      csv += "\n";
    } else {
      csv += csvSeparator;
    }
  }
}

function downloadToFile(content, filename, contentType) {
  const a = document.createElement('a');
  const file = new Blob([content], {type: contentType});
  
  a.href = URL.createObjectURL(file);
  a.download = filename;
  
  // To generate a link, use this:
  a.innerHTML = "Download CSV";
  document.body.appendChild(a);

  // If you want to automatically download then use this instead:
  /*
  a.click();
    URL.revokeObjectURL(a.href);
  */
}

console.log(csv);

downloadToFile(csv, 'csv-export.csv', 'text/plain');
* {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #ccc;
  padding: 5px 10px;
}

a {
  text-decoration: none;
}
<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Occupation</th>
        <th>Photo</th>
      </tr>
    </thead>
    <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>

Related