Styling hyperlinks upon exporting an HTML table to Excel

Question

Styling hyperlinks upon exporting an HTML table to Excel

I am trying to export an HTML table to Excel using JavaScript by following the instructions provided in Export HTML table to Excel its downloading table contents to the Excel.

However, I have encountered an issue where one of the columns in my table contains links. When I export the table to Excel, the content in that column appears as hyperlinks in the Excel sheet. I would like to export the table to Excel without these links, showing just plain text instead.

Is there a way to achieve this?

javascript html css

Answer 1

Answer №1

If you need to update all the linked text with plain text.

Replicate the table that needs to be exported

table = $('#'+tableName).clone();

Swap the anchor tag with the corresponding span

 var sp1 = document.createElement("span");
 var sp1_content = document.createTextNode($(hyperLinks[i]).text());
 sp1.appendChild(sp1_content);
 var sp2 = hyperLinks[i];
 var parentDiv = sp2.parentNode;
 parentDiv.replaceChild(sp1, sp2);

More information on how to replace a node can be found here.

Using the code provided in this Stackoverflow answer for exporting.

Check out the code snippet on PEN

var tmp;
function strip(html) {
  tmp = document.createElement("DIV");
  tmp.innerHTML = html;
  console.log(tmp.innerText);
  console.log(tmp.textContent);
  
  return tmp.textContent || tmp.innerText || "";
}

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,',
    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
    base64 = function(s) {
      return window.btoa(unescape(encodeURIComponent(s)))
    },
    format = function(s, c) {
      return s.replace(/{(\w+)}/g, function(m, p) {
        return c[p];
      })
    }
  return function(table, name, filename) {
    if (!table.nodeType) 
    
    /*Clone the table that is to be exported*/
      table = $('#'+table).clone();
    
    
    
    var hyperLinks = table.find('a');
    
    
    
    for (i = 0; i < hyperLinks.length; i++) {
          
      //hyperLinks[i] =  $(hyperLinks[i]).text();
          var sp1 = document.createElement("span");

          // give it an id attribute called 'newSpan'
          sp1.setAttribute("id", "newSpan");

          // create some content for the new element.
          var sp1_content = document.createTextNode($(hyperLinks[i]).text());
          console.log(sp1_content);
          // apply that content to the new element
          sp1.appendChild(sp1_content);

          // build a reference to the existing node to be replaced
          var sp2 = hyperLinks[i];
          var parentDiv = sp2.parentNode;

          // replace existing node sp2 with the new span element sp1
          parentDiv.replaceChild(sp1, sp2);
      }
    
    
    
      var ctx = {
        worksheet: name || 'Worksheet',
        table: table[0].innerHTML
      }
    

    document.getElementById("dlink").href = uri + base64(format(template, ctx));
    document.getElementById("dlink").download = filename;
    document.getElementById("dlink").click();

  }
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="dlink" style="display:none;"></a>

<table name="tablename" id="tablename" border="1">
<tr>
  <td>1</td>
  <td><a href="http://google.com">google</a></td>
  </tr><tr>
  <td>2</td>
  <td><a href="http://microsoft.com">microsoft</a></td>
  </tr><tr>
  <td>3</td>
  <td><a href="http://amazon.com">amazon</a></td>
  </tr>
</table>

<input type="button" onclick="tableToExcel('tablename', 'name', 'myfile.xls')" value="Export to Excel">

Answer 2

If you need to update all the linked text with plain text.

Replicate the table that needs to be exported

table = $('#'+tableName).clone();

Swap the anchor tag with the corresponding span

 var sp1 = document.createElement("span");
 var sp1_content = document.createTextNode($(hyperLinks[i]).text());
 sp1.appendChild(sp1_content);
 var sp2 = hyperLinks[i];
 var parentDiv = sp2.parentNode;
 parentDiv.replaceChild(sp1, sp2);

More information on how to replace a node can be found here.

Using the code provided in this Stackoverflow answer for exporting.

Check out the code snippet on PEN

var tmp;
function strip(html) {
  tmp = document.createElement("DIV");
  tmp.innerHTML = html;
  console.log(tmp.innerText);
  console.log(tmp.textContent);
  
  return tmp.textContent || tmp.innerText || "";
}

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,',
    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
    base64 = function(s) {
      return window.btoa(unescape(encodeURIComponent(s)))
    },
    format = function(s, c) {
      return s.replace(/{(\w+)}/g, function(m, p) {
        return c[p];
      })
    }
  return function(table, name, filename) {
    if (!table.nodeType) 
    
    /*Clone the table that is to be exported*/
      table = $('#'+table).clone();
    
    
    
    var hyperLinks = table.find('a');
    
    
    
    for (i = 0; i < hyperLinks.length; i++) {
          
      //hyperLinks[i] =  $(hyperLinks[i]).text();
          var sp1 = document.createElement("span");

          // give it an id attribute called 'newSpan'
          sp1.setAttribute("id", "newSpan");

          // create some content for the new element.
          var sp1_content = document.createTextNode($(hyperLinks[i]).text());
          console.log(sp1_content);
          // apply that content to the new element
          sp1.appendChild(sp1_content);

          // build a reference to the existing node to be replaced
          var sp2 = hyperLinks[i];
          var parentDiv = sp2.parentNode;

          // replace existing node sp2 with the new span element sp1
          parentDiv.replaceChild(sp1, sp2);
      }
    
    
    
      var ctx = {
        worksheet: name || 'Worksheet',
        table: table[0].innerHTML
      }
    

    document.getElementById("dlink").href = uri + base64(format(template, ctx));
    document.getElementById("dlink").download = filename;
    document.getElementById("dlink").click();

  }
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="dlink" style="display:none;"></a>

<table name="tablename" id="tablename" border="1">
<tr>
  <td>1</td>
  <td><a href="http://google.com">google</a></td>
  </tr><tr>
  <td>2</td>
  <td><a href="http://microsoft.com">microsoft</a></td>
  </tr><tr>
  <td>3</td>
  <td><a href="http://amazon.com">amazon</a></td>
  </tr>
</table>

<input type="button" onclick="tableToExcel('tablename', 'name', 'myfile.xls')" value="Export to Excel">

Styling hyperlinks upon exporting an HTML table to Excel

Answer №1

Similar questions

How to set the default value for an angularJS select dropdown

The requested `GLIBC_2.28' version required by node cannot be located, leading to an inability to amplify the version

Awaiting the completion of Promises within a for-loop (Typescript)

Do you have any queries regarding JavaScript logical operators?

How can you implement CSS styling for Next.js HTML during server-side rendering?

Adding an element within an ngFor iteration loop

Tips for splitting the json_encode output in Javascript

Ensure you are focusing on elements exclusively contained within the parent table and not any child tables nested within its cells

Moving a component beyond its container using a query

Node.js application experiences a crash upon entering incorrect credentials

What is the best way to position a small image within a menu?

Resetting the index and length in Vue.js each time a new page is loaded

Tips for creating a unique exception in AngularJS?

How to access the public folder in React from the server directory

Learning to Use jQuery to Send JSON Requests in Rails

Error code 1 occurs when attempting to execute the "npm run start" command

Can you show me the steps for downloading the WebPage component?

Using the fetch/await functions, objects are able to be created inside a loop

Trying out asynchronous testing using Mocha and Sinonjs for the first time

Focusing on a particular iframe