Skip to main content

Converting a Google Document to simple HTML

By
This article looks at creating an application that converts a Google Document to HTML, saves it in a folder on your Google Drive and then shares that folder on the web.

This tool is meant for those situations where you have to work in HTML but you'd prefer it if you could use Google's fantastic collaboration features on the content first.

What This App Doesn't Do

It doesn't try to be too clever. I quite like HTML from back in the 90s when it was simple. Most other systems where you can add HTML don't like you getting too fancy either.

It doesn't try to size the images or even get ALL the document elements like Tables of Contents or Page Breaks, it just does the absolute basic needed to copy the source HTML into Blogger or into your CMS and you will need to do more than a little "fixing up" along the way.

What is really useful about this app is that all the images are now hosted and so you don't need to go through the painstaking process of copying the images into new images, saving them online somewhere, getting the URL of those images and replacing the right image src in your new HTML source. This was a pain for me.

Also, the app doesn't HTML encode the "<" and the ">" so you can add HTML tags like the preformatted tag or whatever, knowing that they'll still be there in the outputted HTML. I use the font Courier New to tell it that I don't want the converter code to touch it, but one of the problems is that ANY HTML that is lurking in "courier new" code is shown, as HTML.

The results can be hilarious. Ah well. I said it would need "fixing" up. Here's an example of the HTML it generates.

The application itself looks like this.


The simple application lets you select which Google Doc you want to convert to HTML and then loops through the document elements and creates a html page.

Any images found are added to Google Drive hosting ( their URLs changed to the new location ) letting you copy the HTML from the "index.html" file and paste it anywhere you need.

And Finally

You can try it on your documents here: https://script.google.com/macros/s/AKfycbyRt8FCEDMtZELx7-E_c3Hjktaaf1qJwRmitfRx48UocIP8ViBA/exec

Or if you'd like to rummage around the code please feel free to improve it.
https://script.google.com/a/york.ac.uk/d/1BWQRHrM589TnsXviuB3Zzws_ShFDF6sEdaO4sg4Eht0kuZx1iou4Xxn2/edit
Labels:

Comments

  1. Unknown14 September 2014 at 18:42

    Hi, this is so genius and very helpful for a project I'm making. Thanks for sharing!

    One question: The image converter doesn't seem to be working for me. Have you had any luck with it lately? Any ideas on where to start debugging?

    ReplyDelete
  2. Unknown23 September 2016 at 09:26

    Since WordPress is a successful medium of blogging, WordPress development services have successfully made a mark in the contemporary web world. In fact, most people working in this medium believe that WordPress is surely one of the most potent and elegant Content Management platforms that will surely help webmasters successfully answer your web needs. See more wordpress developers for hire

    ReplyDelete

Post a Comment

Popular posts from this blog

Inserting A Google Doc link into a Google Spreadsheet (UPDATED 6/12/2017)

By
This article looks at using Apps Script to add new features to a Google Spreadsheet. At the University of York, various people have been using Google spreadsheets to collect together various project related information. We've found that when collecting lots of different collaborative information from lots of different people that a spreadsheet can work much better than a regular Google Form. Spreadsheets can be better than Forms for data collection because: The spreadsheet data saves as you are editing. If you want to fill in half the data and come back later, your data will still be there. The data in a spreadsheet is versioned, so you can see who added what and when and undo it if necessary The commenting features are brilliant - especially the "Resolve" button in comments. One feature we needed was to be able to "attach" Google Docs to certain cells in a spreadsheet. It's easy to just paste in a URL into a spreadsheet cell, but they can often...
111 comments
Read more

Writing a Simple QR Code Stock Control Spreadsheet

By
At Theatre, Film & TV they have lots of equipment they loan to students, cameras, microphone, tripod etc. Keeping track of what goes out and what comes back is a difficult job. I have seen a few other departments struggling with the similar "equipment inventory" problems. A solution I have prototyped uses QR codes, a Google Spreadsheet and a small web application written in Apps Script. The idea is, that each piece of equipment ( or maybe collection of items ) has a QR code on it. Using a standard and free smartphone application to read QR codes, the technician swipes the item and is shown a screen that lets them either check the item out or return it. The QR app looks like this. The spreadsheet contains a list of cameras. It has links to images and uses Google Visualisation tools to generate its QR codes. The spreadsheet looks like this. The Web Application The web application, which only checks items in or out and should be used on a phone in conjunctio...
59 comments
Read more

A Working Booking System In Google Sheets

By
Working with Andras Sztrokay we had another go at a booking system. This time it was to enable staff to book out a number of iPads over a number of days. You select the days you want, then select the Booking menu. Andras did an amazing job. It even creates a daily bookings sheet so you can see who has which iPads. To see this in action, go  here  and  File > Make a Copy (I won't be able to support you this is just provided to maybe give someone else a leg up, good luck!)
Post a Comment
Read more