Search code examples
javascriptrjspdfrhandsontabledom-to-image

Ways to capture r shiny Handsontable in a jspdf printout without corruption


I've been working of a reporting feature for an app. It has several small tables that I have been copying over with dom-to-image in jsPDF.

var image = new Image();
  var node;
node = document.getElementById("Table1");
    await domtoimage.toPng(node)
    .then(function (DataURL){
      doc.addImage(DataURL, "PNG", 23, 123, node.clientWidth/4.875, node.clientHeight/4.875);
    });

Recently the images that the tables are have been showing up corrupted with sections edited out. Is there a handsontable js call like in plotly to copy over the table as a data URL?

image = await Plotly.toImage("graph1");
    doc.addImage(image, "JPEG", 12.5, 22.5, 180, 100);

Or an easier way to prevent the images from being corrupted? I was recently using html2canvas but the speed and memory usage would crash Chrome and Firefox whenever I would generate a report.

I have changed around the image type dom-to-image pulls, from PNG to JPEG, and Blob as well. I have edited my CSS file to remove any chance these charts and tables would overlat in the app interface as another safety measure as well.


Solution

  • The issue was not with any code. It was with the laptop we were using. We disabled chromes accelerated 2d canvasing and the images began coming in clearly. Which can be found under chrome://flags