Send HTML Generated From Script to Google Doc with Correct Table Margins

Question

I have a script written in Google Apps Script that takes user input and generates an HTML document. This is all formatted correctly and everything works as expected. What I do next is take that HTML and send it to Google Docs via the following code:

    var html = HtmlService.createHtmlOutput(htmlbody); //printing out 'html' gives you the expected html generated from the script.
      var hBlobber = html.getBlob();
      var datePDF = Utilities.formatDate(new Date(), sendDetails[3], 'yyyyMMdd');
      var title = datePDF + ' - ' + subject.substring(0,subject.indexOf(':'));
      var DocID = Drive.Files.insert({title: title}, hBlobber, {convert:true}).id;
    //Drive.Files.insert({title: 'html'},hBlobber2);
      var margins = {};
      margins[DocumentApp.Attribute.MARGIN_BOTTOM]=18;
      margins[DocumentApp.Attribute.MARGIN_LEFT]=18;
      margins[DocumentApp.Attribute.MARGIN_RIGHT]=18;
      margins[DocumentApp.Attribute.MARGIN_TOP]=18;
      margins[DocumentApp.Attribute.PAGE_WIDTH]=600;
      
      var doc2 = DocumentApp.openById(DocID).getBody().editAsText().setAttributes(margins);
      DocumentApp.openById(DocID).saveAndClose();

This copies it over to a Google Doc, however, there is one issue I cannot seem to figure out. For some reason, it adds a 144px margin to the right side of any tables in the document. Thus, these do not take up the whole page. It is not an issue for text or images or anything else. Only tables. Here is what is seen when inspecting the Google Doc...

<div class="kix-tablerenderer-container" style="margin: 0px 144px 0px 0px;">
  <table class="kix-tablerenerer-table" dir="ltr" style="margin-left: 0px; margin-right: 0px; width: 624px;">

In the HTML code the table width is set as 768px. If I change the code via the inspection to make all the margins 0px and set the width to 768px it works exactly as I want. I cannot seem to override these numbers when it is converted to a Google Doc. Does anyone have any idea why this might be happening?

To reproduce you behaviour as accurately as possible, in your situation what would this htmlbody be? A table ? — Mateo Randwolf
htmlbody includes both text and tables. It is only the tables within that that I am having the issue with. Thanks for looking into it! — hunter21188
Hi ! So using the code you presented I was able to reproduce your behaviour. However, I was able to solve this by the use of appendTable (more info also provided here ). Have you considered using this in your function to insert tables in the right way? Have you considered or can you take your HTML body and addapt its format to insert it directly into a document? — Mateo Randwolf
@MateoRandwolf I'll see if I can get that to work! I have considered taking the HTML body and formatting it to directly fit into a document, but that would be a ton of extra work. Trying not to do that if at all possible. Not sure if there is away to use the appendTable within my code the way it is written now or not. Any ideas how I might apply that to this situation? Thanks! — hunter21188

Mateo Randwolf Mateo Randwolf · Accepted Answer · 2020-10-22T13:24:23

Workaround

After some testing I think one possible way to solve this issue without manually having to alter the document is to create the document file as you were doing and then, using getTables() iterate in a for loop over all the tables in your document to

Get the cell content and store it in an array format (this is for example a table of three rows and two columns would be [['cell 1','cell 2','cell 3'],['cell 4','cell 5', 'cell 6']]). To get the cell content you can iterate over its rows and columns and store each accordingly. Reference to some useful methods to achieve this here.
Use appendTable() to append the table right after the unformatted table you just got the info from (this newly created table as it was added using this method will inherit the correct right margins of the document).
Delete the old tables using removeChild().

I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)

Send HTML Generated From Script to Google Doc with Correct Table Margins

1 Answers

Workaround