Download page as PPT in JavaScript - javascript

I am planning to create a React frontend which handles HTML presentations. Besides letting the users present online, they should also be able to download their HTML presentation as PPT (like Google Slides).
I have not yet decided on what package to use for creating the presentations, but most of the packages seem to only support the typical print-download (the PDF that is converted from the HTML when you press cmd/ctrl + P). One exception is PptxGen, but that package is not an option for me (because of reasons not related to this question).
Is there a way for me to download a HTML page to PPT?
(There are multiple ways to download html to PDF - jsPDF being one. If it's cumbersome to download html as PPT, perhaps it's possible to converting html -> PDF -> PPT and then download it? Any advice?)
Thanks in advance!

Even after extensive searching, I did not find any other open-source library that handles direct HTML-to-PPT conversions, apart from PptxGenJS, so we can conclude that if you want a direct conversion, that's your only option.
There are some other ways to do this though, one that you mentioned is converting to PDF, then to PPT. I have found a service that can do both conversions, called Cloudmersive. They seem to have a free tier, and a Javascript API client that you can use from your frontend, so this is probably worth giving a try. If this managed service also doesn't suit your needs for any reason, you can still handle the conversions yourself, for example, with jsPDF and
pdf-officegen.

Related

Bluebeam or Adobe SaveAs via Submit button using JS

I am trying to see if anyone knows of a workaround to do a save-as using a submit button within a PDF. I have a working version using Trusted functions in Adobe, but for our needs would like to avoid having our end-users from placing .js files in the trusted location on their machines.
The reason I am trying to do a save-as is to simply rename the output file with the date and username and place the files in a centralized location for data collection.
We are aware of using Adobe to distribute and receive responses from end-users... but as mentioned above we are using both platforms, and also have some DirectX issues.
I have also created the same Form in Microsoft Forms and I personally feel like this may be our best option in rolling this out, but before we wrote anything off, I figured I would try and see if there are any other options using JS and PDF's.

How do I render a Word document (.doc, .docx) in the browser using JavaScript?

I have successfully done code to display a PDF file in the browser instead of the "Open/Save" dialog. Now, I'm stuck trying to display a Word document in the browser. I want to display a Word document in Firefox, IE7+, Chrome etc.
Can any one help? I am always getting the "Open/Save" dialog while displaying the Word doc in browser. I want to implement this functionality using JavaScript.
No browsers currently have the code necessary to render Word Documents, and as far as I know, there are no client-side libraries that currently exist for rendering them either.
However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an <iframe> to display a remotely hosted .doc/.docx.
<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>
Solution adapted from "How to display a word document using fancybox".
Example:
JSFiddle
However, if you'd rather have native support, in most, if not all browsers, I'd recommend resaving the .doc/.docx as a PDF file Those can also be independently rendered using PDF.js by Mozilla.
Edit:
Huge thanks to cubeguerrero for posting the Microsoft Office 365 viewer in the comments.
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
One more important caveat to keep in mind, as pointed out by lightswitch05, is that this will upload your document to a third-party server. If this is unacceptable, then this method of display isn't the proper course of action.
Live Examples:
Google Docs Viewer
Microsoft Office Viewer
The answers by Brandon and fatbotdesigns are both correct, but having implemented the Google docs preview, we found multiple .docx files that couldn't be handled by Google. Switched to the MS Office Online preview and works likes a charm.
My recommendation would be to use the MS Office Preview URL over Google's.
https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
There are a few JS libraries that can handle .docx (not .doc) to HTML conversion client-side (in no particular order):
https://github.com/VolodymyrBaydalka/docxjs — works in the browser, docx only, complex layouts might be off, live demo
https://github.com/lalalic/docx2html (npm) — docx to html, most elements are supported, works in browser or nodejs
https://github.com/mwilliamson/mammoth.js — supports headings, lists, tables, endnotes, footnotes, images and text boxes
https://github.com/artburkart/docx2html — apparently, works in the browser
Note: If you are looking for the best way to convert a doc/docx file on the client side, then probably the answer is don't do it. If you really need to do it then do it server-side, i.e. with libreoffice in headless mode, apache-poi (java), pandoc etc.
A great solution if your data is confidential
Since the documents are confidential, they should not be processed on third-party resources.
This solution is open-source:
On the server-side: use Gotenberg to convert word & excel files to PDF.Note: Gotenberg works like a charm, it is based on the LibreOffice engine.
On the frontend: It's very easy to render the PDF file with javascript. (You can use libraries like: pdf.js, react-pdf, etc.)
ViewerJS is helpful to view/embed openoffice format like odt,odp,ods and also pdf.
For embed openoffice/pdf document
<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>
/ViewerJS/ is the path of ViewerJS
#../demo/ohm2013 is the path of your file want to embed
I think I have an idea.
This has been doing my nut in too and I'm still having trouble getting it to display in Chrome.
Save document(name.docx) in word as single file webpage (name.mht)
In your html use
<iframe src= "name.mht" width="100%" height="800"> </iframe>
Alter the heights and widths as you see fit.
If you wanted to pre-process your DOCX files, rather than waiting until runtime you could convert them into HTML first by using a file conversion API such as Zamzar. You could use the API to programatically convert from DOCX to HMTL, save the output to your server and then serve that HTML up to your end users.
Conversion is pretty easy:
curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=#my.docx" \
-F "target_format=html5"
This would remove any runtime dependencies on Google & Microsoft's services (for example if they were down, or you were rate limited by them).
It also has the benefit that you could extend to other filetypes if you wanted (PPTX, XLS, DOC etc)
Native Documents (in which I have an interest) makes a viewer (and editor) specifically for Word documents (both legacy binary .doc and modern docx formats). It does so without lossy conversion to HTML. Here's how to get started https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md
PDFTron WebViewer supports rendering of Word (and other Office formats) directly in any browser and without any server side dependencies.
To test, try https://www.pdftron.com/webviewer/demo
You can also use some existing API's like GroupDocs.Viewer which can convert your document into image or html and then you will be able to display it in your own application.
Use Libre Office API
Here is an example
libreoffice --headless --convert-to html docx-file-path --outdir html-dir-path

Converting docx/odt to PDF using JavaScript

I have a node web app that needs to convert a docx file into pdf (using client side resources only and no plugins). I've found a possible solution by converting my docx into HTML using docxjs and then HTML to PDF using jspdf (docx->HTML->PDF).
This solution could make it but I encountered several issues especially with rendering. I know that docxjs doesn't keep the same rendering in HTML as the docx file so it is a problem...
So my question is do you know any free module/solution that could directly do the job without going through HTML (I'm open to odt as a source as well)? If not, what would you advise me to do?
Thanks
As you already know there is no ready-to-use and open libs for this.. You just can't get good results with available variants. My suggesition is:
Use third party API. Like https://market.mashape.com/convertapi/word2pdf-1#!documentation
Create your own service for this purpose. If you have such ability, I suggest to create a small server on node.js (I bet you know how to do this). You can use Libreoffice as a good converter with good render quality like this:
libreoffice -headless -invisible -convert-to pdf {$file_name} -outdir /www-disk/
Don't forget that this is usually takes a lot of time, do not block the request-answer flow: use separate process for each convert operation.
And the last thing. Libreoffice is not very lightweight but it has good quality. You can also find notable unoconv tool.
As of January 2019, there is docx-wasm, which works in node and performs the conversion locally where node is installed. Proprietary but freemium.
It appears that even after three years ncohen had not found an answer. It was also unclear if it had to be a free (as in dollars) solution.
The original requirements were:
using client side resources only and no plugins
Do you mean you don't want server side conversion? Right, I would like my app to be totally autonomous.
Since all the other answers/comments only offered server side component solutions, which the author clearly stated was not what they wanted, here is a proposed answer.
The company I work for has had this solution for a few years now, that can convert DOCX (not odt yet) files to PDF completely in the browser, with no server side component required. This currently uses either asm.js/PNaCl/WASM depending on the exact browser being used.
https://www.pdftron.com/samples/web/samples/viewing/viewing/
Open an office file using the demo above, and you will see no server communication. Everything is done client side. This demo works on mobile browsers also.

In-browser conversion of MS Word document to PDF

I would like to implement an in-browser Microsoft Word document merge feature that will convert the merged document into PDF and offer it to the user for download. I would like to this process to be supported in Google Chrome and Firefox. Here is how I would like it to work:
Client-side JavaScript obtains the Word template document in docx format, either from a server, or by asking the user for a file upload (which it can then read using the FileReader API)
The JavaScript uses its local data structures (e.g., data lists it has obtained via Ajax) to expand the template into a document. It can do this either directly, by unzipping the docx file and processing its contents, or using DOCx.js. The template expansion is just a matter of substituting template variables with values obtained from the local data structures.
The JavaScript then converts the expanded template into PDF.
The JavaScript offers the PDF file to the user for download, e.g., using Downloadify.
The difficulty I am having is in step 3. My understanding (based on all the Googling I have done so far) is that I have the following options:
Require that the local machine is a Windows machine, and invoke Word on it, to convert to PDF. This can be done using a little bit of scripting using WScript.shell, and it looks doable with Internet Explorer. But based on what I have read, it doesn't look like I can call WScript.shell from within either Chrome or Firefox, because of their security constraints.
I am open to trying Silverlight to do the conversion, but I have not found enough documentation on how to do this. Ideally, if I used Silverlight, I would like to write the Silverlight code in JavaScript, because (a) I don't know much CSharp, and (b) I think it would be much easier in JavaScript.
Create a web service that will convert a given docx file to a pdf file, and invoke that service via Ajax. I would rather not do this, if possible, for a few reasons: (a) I tried using docx4java (I am a reasonably skilled Java programmer) but the conversion process is far too slow, and it does not preserve document content very well; and (b) I would like to avoid a call out to the network, to avoid security issues. It does seem possible to write a little service on a Windows server for doing the conversion, and if there is no other good option, I might go that route.
If I have been unclear about anything, please let me know. I would appreciate your ideas and feedback.
I love command line tools.
Load the doc to your server and use LibreOffice to convert it to PDF via the command line
soffice.exe --headless --convert-to pdf --outdir E:\Docs\Out E:\Docs\In\a.doc
You can display a progress bar to the user and when complete give them the option to download the doc.
More info on LibreOffice's command line parameters go here
Done.
Old old question now, but for anyone who stumbles across this, web assembly (wasm) now makes this sort of approach possible.
We've just released https://www.npmjs.com/package/#nativedocuments/docx-wasm which can perform the conversion locally.

HTML5 Rich app: a way to deliver printable reports

HTML5 Rich app.
I need to deliver to a user printable (A4 format) report from the application. So that the user could see it preview version in the app, and then print it.
What alternatives do I have to do that?
We are currently doing this at Agency Fusion, and have been looking at some libraries/services like:
WickedPDF (ruby)
DocRaptor (SaaS with multi-lingual api wrappers)
Prawn (ruby)
We have decided to go with Wicked PDF and using css page-break properties
This way we have control over how the pdf is rendered. The user can then download the PDF as the report, and then send it to the printer if they wish to print it.
There are two completly different approaches:
Try to create "printable" HTML, deal with all cross-browser issues (I mean the printing-related ones, that go on top of the "usual" ones), lose control over page headers etc.
Use something, that is "electronic paper" - PDF being the most prominent suspect. There are many libraries to facilitate this approach.
You might be able to infer which version I prefer from my tone.

Categories