Retrieve the HTML content of a Google Document and transmit it via GmailApp

I am struggling to send the content of a Google Document as HTML via Gmail, while trying to maintain the original formatting within the message. The current output is not accurate at all.

  • When using Gmail, all formatting such as image wrapping, bold font, and colors are missing
  • With Mozilla Thunderbird or Microsoft Outlook, only the image wrapping is lost, but there is some extra top margin added

Is there a way to improve this or make it work correctly?

Below is the code I am currently using:

function doc2mailtest() {
  var docId = "1glvAaYuYm25oZZVmHLaEySlPP-9fIqGwm17wAs1HpHc";
  // link to document: https://docs.google.com/a/thexs.ca/document/d/1glvAaYuYm25oZZVmHLaEySlPP-9fIqGwm17wAs1HpHc/edit
  var html = getDocAsHtml(docId); // OK but not accurate - ignore text format and image wrapping
  GmailApp.sendEmail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f8f0d5e6faf8f0bbf6faf8">[email protected]</a>", "Just testing MMD", '', { htmlBody: html });
  return;
}
function getDocAsHtml(docId) {
  var scope = 'https://docs.google.com/feeds/';
  var url = scope+'download/documents/Export?exportFormat=html&format=html&id=';
  var auth = googleOAuth_('docs',scope);
  return UrlFetchApp.fetch(url+docId,auth).getContentText();
}
function googleOAuth_(name,scope) {
  var oAuthConfig = UrlFetchApp.addOAuthService(name);
  oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
  oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
  oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
  oAuthConfig.setConsumerKey('anonymous');
  oAuthConfig.setConsumerSecret('anonymous');
  return {oAuthServiceName:name, oAuthUseToken:"always"};
}

Thank you, Fausto

Answer №1

If you're looking to send an HTML email version of a document in Google Docs, there's an add-on available. Simply go to "Add-ons > Get Add-ons" and search for "email html".

For a more technical approach, check out Omar AL Zabir's blog post on converting Google Docs to clean HTML. Instead of extracting the HTML directly, the method involves traversing the document object to gather each element and generate the HTML output.

Making sure that the email displays correctly across all email clients can be challenging. While it's a complex subject, here are a few key points to consider:

  • To ensure proper formatting, some email clients like GMail require in-line styling instead of CSS style blocks. If you're experiencing issues with formatting in GMail, refer to this Stack Overflow thread on using Google Apps Script to convert CSS to inline styles.
  • Image wrapping information within Google Docs may not be accessible to scripts, so keep this limitation in mind when working on your HTML email.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to exclude children objects from spring animations during application?

Is it possible to create a fading in and out effect for a div (for example, to cycle through different backgrounds) while keeping its children (such as text) visible at full opacity at all times? {transitions((style, <animated.div class={ bg[i] + ...

Form a collection of phrases from a string using Java Velocity Template

I'm currently working with velocity templates and I have a specific task of dividing the output of a function into an array of sentences: $page.getSectionCopy() which returns: The first sentence. The second sentence. The third sentence. The fourt ...

How can I place my container above my header in the layout?

I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for: No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening. HTML: <!DOCTYPE html PUBLIC ...

CSS popup experiencing issues due to Iframe integration

As someone who is relatively new to web development and completely self-taught, I've encountered a challenge with an iframe on my page. I have a CSS and JavaScript popup that is triggered by jQuery. The desired behavior is that when a link is clicked, ...

What is the best way to address background-image overflow on a webpage?

I'm facing a challenge in removing the overflow from a background-image within a div. There are 4 divs with similar images that combine to form one background image (I adjust the position of each image so they align across the 4 divs). Essentially, I ...

What is the ideal location to store images that are referenced in a Django CSS file?

I recently downloaded a template from the internet which came with a base HTML file, images, and a CSS file. Now, I am attempting to incorporate all of this into my Django project. Unfortunately, my efforts have not been successful so far. The webpage is ...

Ways to update the color of the mat-dialog-title using the material theme

Currently, I am utilizing the Angular Material Dialog and have been attempting to dynamically change the title color of the dialog based on the material theme. <h1 mat-dialog-title color="primary">{{ title }}</h1> Even though setting ...

Issues with functionality of JavaScript calculator in HTML forms

Currently, I am working on creating a basic perimeter calculator specifically designed for a projector screen. This code is intended to take the response from a radio button input and the diagonal length in order to accurately calculate the perimeter base ...

Tips for properly encoding HTML code before inserting it into a MySQL database

I have been using the tinymce editor to create an html page that I then insert into mysql. Here's what I've tried: $esdata = mysql_real_escape_string($data); This method works for all types of html formatting, except for images. For example, if ...

Determine the sum of all cell values in rows that share the same date using JavaScript

I am currently developing a dashboard for an online food ordering platform. One of the essential functionalities I need to implement is the ability to display the total sales amount per day, categorized by payment methods, when users click on a specific mo ...

Eliminate php file extensions using .htaccess

Currently, I am developing a script and looking to change the links in the following way: www.mysite.com/sign-up.php to www.mysite.com/sign-up and www.mysite.com/profile.php?username=abc to www.mysite.com/profile/abc I have come across this code that ...

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI

import React from 'react'; import { makeStyles, Typography, Grid } from '@material-ui/core'; const styles = makeStyles((theme) => ({ root: {}, textStyle: { fontFamily: 'brandon-grotesque-black', tex ...

I'm having trouble with my paragraph tag fulfilling its responsibilities

Let's get straight to the point. Here is the code snippet that's causing me some issues: <p id="mainBlock"> <img src="/icons/128x128.png" id="icon"> <h3>App name</h3> <span id="version"></span> < ...

Styling with CSS based on attribute values falling within a specific range

I developed a calendar system where each day is represented as a list item. Within each item, there is a span element with a data-count attribute that indicates the availability of a specific resource, which is updated dynamically. My goal is to change the ...

A guide on updating div IDs using jQuery sortable when an element is moved by the user

My goal is to use jQuery sortable to allow users to rearrange elements on a page by dragging and dropping them. Each div element has a unique ID, and when the user swaps elements, I want to update the IDs accordingly and alert the new order so it can be sa ...

Issue with displaying the glyphicon-chevron on the carousel control

Currently, I'm in the process of incorporating a straightforward modal into my gallery design. I have a slide carousel positioned at the top of the page, while at the bottom, there are thumbnails of the gallery. While the slide carousel control butto ...

Accordion with Tooltips

Exploring the possibilities of Accordions and Tooltips, I aim to create an accordion element with a table containing information. The idea is to add a question mark icon on the right side, which will serve as a Tooltip when hovered over. After designing t ...

enhancing the functionality of appended children by including a toggle class list

I'm having trouble toggling the classList on dynamically appended children. The toggle works fine on existing elements, but not on those added through user input. Any tips on how I can achieve this? I'm currently stumped and would appreciate any ...

Learn how to retrieve and transfer data from a MySQL database table to a hidden input field in an HTML form using PHP

I have a scenario where a user fills out the first form, submits it, and the details are saved in a database table. After that, I need to set a value from the data sent to the database into a hidden input field in the second form upon clicking a button. To ...

Creating a parallax effect across the entire webpage using just CSS

As I work on a standard WordPress website for a client, the designer has requested a subtle layer with SVG elements to be incorporated. This layer should scroll "over the normal content" parallax-style. The existing content is basic HTML with relative/sta ...