HTML to Image from Google Sheets to Google Drive on Google Apps Script

Question

I'm trying convert html to image and save this to Google Drive. I can't find example on this site, then I ask the question.

I forming html text on script and send this to email. It looks like this: HTML on Email

I want convert HTML Table to image and save it to Google Drive some such construction:

  file[i] = DriveApp.createFile(img);
  file[i].setName(text + "_#" + (i + 1));

Answer 1

I believe your goal is as follows.

• You want to create an HTML table for an image using Google Apps Script.

In this case, how about the following sample script? In this sample script, I used Class Charts.

Sample script:

const html = '<table border="1" style="border-collapse: collapse" width="100%" height="100%"><tr><th>colA</th><th>colB</th><th>colC</th></tr><tr><td>A1</td><td>B1</td><td>C1</td></tr><tr><td>A2</td><td>B2</td><td>C2</td></tr><tr><td>A3</td><td>B3</td><td>C3</td></tr></table>';
const img = Charts.newTableChart().setDataTable(Charts.newDataTable().addColumn(Charts.ColumnType.STRING, '').addRow([html]).build()).setOption('allowHtml', true).setDimensions(600, 300).build().getBlob();

file[i] = DriveApp.createFile(img);
file[i].setName(text + "_#" + (i + 1));

• html is a sample HTML table. Please modify it for your HTML table. The sample HTML table is as follows.

   <table border="1" style="border-collapse: collapse" width="100%" height="100%"><tr><th>colA</th><th>colB</th><th>colC</th></tr><tr><td>A1</td><td>B1</td><td>C1</td></tr><tr><td>A2</td><td>B2</td><td>C2</td></tr><tr><td>A3</td><td>B3</td><td>C3</td></tr></table>

• When the above script is run, the following image is obtained.

  

• In this sample script, the image size is setDimensions(600, 300) . So please modify this for your actual situation.

• For example, if you want to save the HTML table as a PDF file, please modify img as follows.

   const img = Utilities.newBlob(html, MimeType.HTML).getAs(MimeType.PDF);

References:

• Class Charts
• newDataTable()