'addEventListener() is not working on a <span> text inside jsPDF autotable

I am trying to add a <span> element into one of my html table cells, and then register a click() listener to it. When the <span> is clicked, it should redirect to a certain page, along with some parameters. This is my code:

success: function(response) {
       if(response[0]=='['){
             const arr=JSON.parse(response);
             for(var i=0; i<arr.length; i++){
                 var row = table.insertRow(table.rows.length);
                 for(var j=0; j<arr[i].length; j++){
                     var cell = row.insertCell(j);
                     if(j!=2)
                         cell.innerText=arr[i][j];
                     else{
                         let link = document.createElement('SPAN');
                         link.innerText='Click here';
                         link.style.color="red";
                         link.style.cursor="pointer"
                         link.addEventListener("click",function(){view_snippet(date.value,arr[i][0],arr[i][1],arr[i][2])});
                         cell.appendChild(link);
                     }
                 }
             }
        }
}

function view_snippet(date, name, desc, snipp){
      sessionStorage.setItem("date",date);
      sessionStorage.setItem("newspaper_name",name);
      sessionStorage.setItem("news_desc",desc);
      sessionStorage.setItem("snippet",snipp);
      window.open('/view_page.html','_blank');
}

Now, I am trying to store my html table into a pdf and download it. For this purpose I am using jsPDF autotable library. This is my code:

//insert tables here
if(table!=null){
    if(table.rows.length>1){ 
        doc.autoTable({  
            html: '#news_pos_details',  
            startY: 144,
            startX: 30,  
            theme: 'grid',  
            columnStyles: {  
                    0: {  
                        cellWidth: 40,  
                    },  
                    1: {  
                        cellWidth: 60,  
                    },  
                    2: {  
                        cellWidth: 30, 
                    },
                    3:{
                        cellWidth: 15,
                    },
                    4:{
                        cellWidth: 40,
                    }   
             },
             styles: {  
                  fontSize: 10,
                  cellWidth: 'wrap' 
             }  
       })
   }
   else{
       doc.setFontType("italic");
       doc.text(52,174,"No news available in this section");
   }
}
//doc.addpage()
doc.save('report.pdf');

In the pdf generated, I find that:

  • The cursor pointer is not showing when I hover over the <span> text.
  • The <span> isn't red in color.
  • Most importantly, if I click on it, the function view_snippet() isn't executed.

How do I fix this issue? Please help me.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source