aadel112 / googoose Goto Github PK

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

License: Apache License 2.0

JavaScript 77.88% HTML 22.12%

googoose's Introduction

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.

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.

googoose's People

Contributors

Stargazers

Watchers

googoose's Issues

When add note, Header/Footer will display on the right.

Hi ,
when I add note ,the Header/Footer will display on the right :(
Could you help me？

How to remove header and footer from cover page

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 :

Change font - removes with some fonts, but cannot be deleted
Copied to note pad, this text box on Github, - nothing
toggle field codes in Word - nothing.
open in word as .doc, then open in sublime and save - nothing
Make an unrelated change to text inside doc - nothing
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">  <span class="MsoPageNumber"> <span style="mso-no-proof:yes"> 1 </span> </span> </span> </div> </div> </td> </tr> </tbody> </table>

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.

Header Footer issue, Images issue, Other languages showing wrong issue. (Resolved)

Hello everyone, I was using jquery.wordexport.js and having issues in header footer so then I researched and found jquery.googoose.js, no doubt it also had some flaws so researched again and found some code and added that code to jquery.googoose.js file and now it's working perfectly fine, am attaching my refined jquery.googoose.js file, I have saved it in text so you should convert it to .js file before using it.
googoose.txt

How to get rid of the small box below header and footer

As mentioned in the attached image , I'm getting a small box below header and footer. Kindly let me know how to resolve the same.

@aadel112

Regards,
Sowndarya

Unicode UTF-8

You don't have unicode UTF-8.

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.

Nothing happens

Nothing happens after start googoose function.

Word interprets downloaded doc file as html

My issue is that when I download a file using this plugin, the word file is correctly downloaded as .doc extension.

However, Word(365) thinks it's an html file, which results in suboptimal performance when utilizing the file in word, one example of such is that whenever you save a file, it automatically converts the file to webview layout.

This code has been working as it should for many years, which makes me think that an update to word resultet in it suddenly thinking these files are html, but I can't figure out why that would be.

Do you have an idea?

Footer adds page break in Word

I see in the code that you are placing the header/footer table outside of view using margins, but this results in page breaks in the Word document. Do you have any solutions for this?

Using Googoose i Can't Get Base64 Images

When I'm using Googoose working perfectly. headers and footers also fixing perfectly normal images are also working perfectly. but when i'm getting decoded images (base64) i can't get the output.
Please help me above issue.

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

LibreOffice writer output

Footer current page total page not working

Hi! i want to show currentpage/totalpage but it shows 1/1 every page. What am i doing wrong?

Document in landscape format

Is there any property to generate the document in landscape format?

404 Not found

GET https://github.com/aadel112/googoose/jquery.googoose.js 404 (Not Found)

This is the error i get every time i run the application.

Header/Footer Not Working Properly

Was there a mistake in the patch-2 merge?

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('');

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

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

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.