A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance

Overview

googoose

A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance

About

Googose allows you to turn any html content page into a properly formatted Microsoft Word (.doc) file.

Benefits

  • You now have the aility to view rich web content.
  • You can generate word documents programatically without doing a whole lot of work, using a third party library, etc
  • You can integrate this directly into sites with wysiwyg editors (eg:Wordpress). There is no need to install a plugin.

Status

This is pretty close two as fully-fledged as it's going to be. Right now I'm just hardening it and working on bug fixes.

Requirements

As you can see, you are required to include jquery in your page before googose

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>              
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/aadel112/googoose@master/jquery.googoose.js"></script>

I see no reason that jquery 1.5 or earlier wouldn't be supported, but I haven't tested this.

Usage

The simplest usage will just call googose on page load.

<script type="text/javascript">
$(document).ready(function() {
    var o = {
        filename: 'test.doc'
    };
    $(document).googoose(o);
});
</script>

The content that is rendered to a Word doc will need to be wrapped in a div with the classname googoose-wrapper, by default.

<div class="googoose-wrapper"></div>

Options

  • area: 'div.googoose-wrapper' - This is the default selector of html to wrap the Word doc in.
  • headerfooterid: 'googoose-hdrftrtbl' - This is used by the internals of googoose to manufacture headers and footers.
  • margins: '1.0in' - the default CSS origins of the Word document.
  • zoom: '75' - the default Zoom percentage when the Word document opens.
  • filename: null - the file name to save as. used only by the default finish action.
  • size: '8.5in 11.0in' - the default size of the Word document.
  • display: 'Print' - the default display mode to open the Word document in.
  • lang: 'en-US' - the language on the page. defaults to English US.
  • toc: 'div.googoose.toc' - if used by the developer this jQuery selector will translate into a Word table of contents.
  • pagebreak: 'div.googoose.break' - if used by the developer at this jQuery selector will translate into a Microsoft Word page break.
  • headerarea: 'div.googoose.header' - the content in this jQuery selector will be put in the Microsoft Word document header.
  • footerarea: 'div.googoose.footer' - the content in this jQuery selector will be put in the document footer.
  • headerid: 'googoose-header' - used solely by the googoose internals
  • footerid: 'googoose-footer' - used solely by the googoose internals
  • headermargin: '.5in' - CSS margin for the header.
  • footermargin: '.5in' - the CSS margin for the footer.
  • currentpage: 'span.googoose.currentpage' - generally used in headers and Footers this whole display the current page number.
  • totalpage: 'span.googoose.totalpage' - generally displayed in headers and Footers this jQuery selector when put into the HTML content will display the number of total pages.
  • finishaction: GG.finish - this is the default action that is called after the HTML has been rendered.
  • html: null - gets populated before finishaction
  • initobj: document - the root node

To come

I've abandoned trying to make canvases and SVGs work for now. The developer can make this work by saving the canvas and SVG elements before invoking googoose on the server and then setting the source of the image to be the URL of the save to canvas, referencing the server URL.

I'm currently only working on bug fixes, and making sure the in implmentation is working.

More

A perfectly good full example can be found here in this WordPress plugin which hooks googoose functionality to the tinymce editor. You can visit my blog. I plan on putting more content regarding googoose on there. You can contribute by donating. Even $5 would be greatly appreciated.

Update - 2021-02-28

It's been a long time since I've looked at this project. I made it for a specific period in time in my life when it was needed, but I've been encouraged by the use it seems to have gotten, and I believe I even got a donation from it, and I have set it as a goal to try to maintain this project at least once a week. As always, though, contributors are more than welcome.

Comments
  • Header and footer word question marks.

    Header and footer word question marks.

    Hi there,

    I am trying to implement the headers and footers, and have a constant error on the word doc with a question mark icon inside a square, this cannot be deleted in the word document. Applies to the header item as well. of 160 Tried the following at this point :

    1. Change font - removes with some fonts, but cannot be deleted
    2. Copied to note pad, this text box on Github, - nothing
    3. toggle field codes in Word - nothing.
    4. open in word as .doc, then open in sublime and save - nothing
    5. Make an unrelated change to text inside doc - nothing
    6. in Sublime make format changes and resave as new filename - nothing

    <table id="googoose-hdrftrtbl"> <tbody> <tr> <td class="h"> </td> <td class="f"> <div style="mso-element:footer" id="googoose-footer"> <div class="googoose footer"> ofttt <span class="googoose totalpage"> <!--[if supportFields]><span class=MsoPageNumber><span style='mso-element:field-begin'> </span> NUMPAGES <span style='mso-element:field-separator'> </span> </span> <![endif]--> <span class="MsoPageNumber"> <span style="mso-no-proof:yes"> 1 </span> </span><!--[if supportFields]><span class=MsoPageNumber> <span style='mso-element:field-end'></span></span><![endif]--> </span> </div> </div> </td> </tr> </tbody> </table>

    1. Systematically remove items in the text above until the icon disappears - Works when the commented area below is blank. At this point, the icon disappears.

    <table id="googoose-hdrftrtbl"> <tbody> <tr> <td class="h"> </td> <td class="f"> <div style="mso-element:footer" id="googoose-footer"> if this is blank here , then there is no icon. </div> </td> </tr> </tbody> </table> 8. Messed around with the styles, and found that by moving code into normal body and not the header, that the symbol now displays as an " End Of Cell Marker (tables) " when the paragraphs are shown. 9. Deleted table elements in the footer, new code from 6. now HTML code looks like this

    <div style="mso-element:footer" id="googoose-footer">
                <div class="googoose footer">
                 of <span class="googoose totalpage">
             <!--[if supportFields]><span class=MsoPageNumber>
             <span style='mso-element:field-begin'>
             </span> NUMPAGES <span style='mso-element:field-separator'>
             </span>
           </span>
         <![endif]-->
         <span class="MsoPageNumber">
           <span style="mso-no-proof:yes">
            1
          </span>
        </span>
     <!--[if supportFields]>
     <span  class=MsoPageNumber>
     <span style='mso-element:field-end'>
     </span>
     </span>
    <![endif]-->
    </span>
    </div>
    </div>
    

    This now works. Might be the table, might be the style on the table ... will update this post with details.

    Update : By adding random text link this 👍 </tbody>asdasda</table> The icon disappears, however, the TBODY is auto-added to the HTML, and nearly impossible to modify using the jquery appends.

    opened by jondo89 4
  • add optional callback to return blob

    add optional callback to return blob

    Optional callback argument returns file blob so that something else can be done with the data. In my case, this is used so that UWP javascript can write the data to file using Windows.Storage.FileIO.writeBytesAsync

    opened by roryok 0
  • call to undefined js element window.location.path

    call to undefined js element window.location.path

    Hi, I'm not sure if you're still occasionally working on this project, but I've found an issue that happens occasionally. This may be the source of some of the other issues reported, but I'm not sure.

    On line 196, there is a call to window.location.path: var p = l.path.replace('/\/[^\/.]+$/', '/' );

    This fails as it is not a valid element in my browser. Should it be pathname rather than path? Sorry, if I have misunderstood as I'm not clear on the code function, but have at least found where it is failing.

    Thanks.

    opened by jjr52 2
  • The document could not be opened in Mac OS

    The document could not be opened in Mac OS

    I had generated the doc and save in Mac OS, but it could not be open by Microsoft Word. And it could be open in Windows by Microsoft Word and works well.

    微信图片_20210824111048
    opened by fairok 0
  • Images are not visible in Google docs and Ms Word

    Images are not visible in Google docs and Ms Word

    Images added in base64 are not visible in Google docs and Ms Word. I can see images in LibreOffice writer

    Google sheet output

    image

    LibreOffice writer output

    image

    opened by rahilkencor 0
  • Header/Footer Not Working Properly

    Header/Footer Not Working Properly

    Was there a mistake in the patch-2 merge?

    image

    Headers/footers do not work for me when using the main branch that has ...class=headerArea ... class=footerArea...

    Also headers and footers do not work for me without thtml.find(options.headerarea)[0].replaceWith(''); & thtml.find(options.footerarea)[0].replaceWith('');

    image

    Using exampleTest.html from https://github.com/hausman-gdit/googoose I get another header & footer at the end of the document.

    image

    Any ideas? I'll keep plugging away! Thanks for the neat library.

    opened by hausman-gdit 12
Owner
Aaron Adel
Aaron Adel
This bot was created with the sole purpose of replying to messages with the word "que" with the word "so"

UselessComplete This bot was created with the sole purpose of replying to messages with the word "que" with the word "so" If you want tu support the b

ThisIsAName 6 Aug 30, 2022
Generates MIDI chords and scales, which can be downloaded as a free MIDI pack.

MIDI Chords and Scales Pack Description This projects generates (~400) MIDI chords and (~300) MIDI scales, which can be downloaded as a free MIDI pack

Simon Heimler 10 Dec 14, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database using SQL queries

Microsoft Excel Add-in for Developers About Us Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database u

OSLabs Beta 30 Sep 30, 2022
This package is for developers to be able to easily integrate bad word checking into their projects.\r This package can return bad words in array or regular expression (regex) form.

Vietnamese Bad Words This package is for developers to be able to easily integrate bad word checking into their projects. This package can return bad

Nguyễn Quang Sáng 8 Nov 3, 2022
jQuery UI widget for color picking (similar to the one in Microsoft Office 2010).

evol-colorpicker · evol-colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline or as a popup bound

Olivier Giulieri 285 Dec 14, 2022
This is a plugin for Obsidian (https://obsidian.md). Can open document with `.html` and `.htm` file extensions.

Obsidian HTML reader Plugin This is a plugin for Obsidian (https://obsidian.md). Can open document with .html and .htm file extensions. Obsidian HTML

null 37 Dec 27, 2022
Obsidian plugin: copy document as HTML, including images

Copy as HTML Plugin for Obsidian that copies the current document to the clipboard, so it can be pasted into HTML aware application like gmail. This p

mvdkwast 18 Dec 22, 2022
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Guilherme Assemany 18 Feb 10, 2022
jQuery plugin of countdown on html-page

jQuery SyoTimer Plugin jQuery plugin of countdown on html page Demo Examples of usage jQuery SyoTimer Plugin Features Periodic counting with the speci

John 18 Nov 25, 2022
Project Cider. A new look into listening and enjoying Apple Music in style and performance. 🚀

Links Wiki Request Feature Report Bug View The Releases Install Sources Compiling and Configuration For more information surrounding configuration, co

Cider Collective 5.8k Jan 5, 2023
🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Web Extension Starter A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome

BCIT Design & Development Club (BCIT-DDC) 28 Dec 28, 2022
Random Fractals stash of Observable Data Tools 🛠️ and Notebooks 📚 in ES Modules .js, .nb.json, .ojs, .omd, .html and .qmd document formats for Data Previews

Random Fractals stash of Observable Data Tools ??️ and Notebooks ?? in ES Modules .js, .nb.json, .ojs, .omd, .html and .qmd document formats for Data Previews in a browser and in VSCode IDE with Observable JS extension, Quarto extension, and new Quarto publishing tools.

Taras Novak 14 Nov 25, 2022
A JavaScript Library that allows you to execute function when a certain element gets added to the document

wait-for-it.js A JavaScript Library that allows you to execute function when a certain element gets added to the document Getting Started If you want

Muhammad Tayyab Sheikh 12 Apr 26, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022
Smart Time Ago is a little jQuery library to update the relative timestamps in your document.

Smart Time Ago Smart Time Ago is a little jQuery library to update the relative timestamps in your document intelligently. (e.g "3 hours ago"). It's o

Pragmatic.ly 588 Dec 6, 2022
JavaScript Express.js app serving static vanilla JS. This sample app is used in Microsoft Docs to demonstrate how to integrate Azure Storage, Azure Cosmos DB, and Azure Active Directory.

JavaScript on Azure Learn Path - Module 2 - Deploying a basic app to Azure This Learn module requires the following Azure resources to deploy correctl

Azure Samples 13 Dec 31, 2022
A framework for building collaborative Microsoft Teams and M365 experiences.

Live Share SDK The Live Share SDK is in preview. You will need to be part of the Developer Preview Program for Microsoft Teams to use this feature. Th

Microsoft 65 Jan 1, 2023
The front-end CSS framework for building experiences for Office and Microsoft 365.

Office UI Fabric Core The front-end framework for building experiences for Office and Office 365. Fabric is a responsive, mobile-first collection of s

Office Developer 3.7k Dec 20, 2022