Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

145
Views
object HTMLImageElement showing instead of [object chart image

I'm using HTML to canvas to download the HTML page with n number of charts. but the chart images are didn't displayed in my document(2016 word or lower versions).

Can anybody help me to solve this? else would suggest the new method for downloading the html with chart images in the word document.

here is my html2canvas code.

var chartCount = document.getElementById(listofCharts).children.length;
            var charts = document.getElementById(listofCharts).children;
                        
            //Navigate through each chart area.. add to canvas and add to word.
                //Get the chart Details
                 for (crt=0; crt<chartCount;crt++){
                    var chartKids = (charts[crt].children)[0].children;
                     await html2canvas(chartKids[1]).then(canvas => {  
                           var dataURL = canvas.toDataURL();
                           //chartImages[crt] = "<img src ='"+dataURL+"'>";   
                        //console.log("dataURL "+dataURL);
                        
                        var imageD1 = new Image;                        
                        var image = dataURL;

                        imageD1.src = image;                        
                        console.log(imageD1);
                        chartImages[crt] = imageD1;
                      }); 
                      
                }
                    
                //Get the table contents.
                for (i = 0; i< chartCount;i++){
                    var chartKids = (charts[i].children)[0].children;
                    tableContents[i] = chartKids[0].innerHTML       
                }       
                
        
                //Combine all the above data in a nice format to show in word. 
                for(x=0;x<tableContents.length;x++){
                    
                    wordHtml = wordHtml + tableContents[x] + breakLine;
                    wordHtml = wordHtml + chartImages[x] + breakLine;
                    
                    //Retain the H1 tag here after the chart. This is used to create page Break.
                    wordHtml = wordHtml  + "<h1> end of section   </h1>" + breakLine;
                }
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!