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.
I am using AngularJS in a MEAN stack based on DaftMonk’s generator (https://github.com/DaftMonk/generator-angular-fullstack). I am fairly new to pretty much everything Angular/JS/Node (and stackoverflow so please feel free to point out if I need to reword my question!).
I am aiming to produce a multipage PDF report for a user from an Angular page that contains six graphs, images and text.
There are a number of questions on stackoverflow and Google that relate to potential solutions to this, but having checked these exhaustively, they do not help with what I need to achieve (or I do not understand how I can use them in my scenario..).
Currently, when the user navigates to the ‘report page’, an http request is sent to Node/Express from the Angular controller, which checks the user role/group ID, queries the database, anaylses the data and sends it back to the browser for rendering into graphs (currently using angular-chartjs and flot).
The user selects graph type and can choose a maximum of six graphs to display from a possible list of 20+. These six graphs are what need to be exported to a PDF report (with other information). I need to make this (within reason) as browser compatible as possible (at least IE8+) although my current solution is IE10+ with PDF export disabled for older browsers using Modernizr.
From stackoverflow and Google, possible solutions include using PhantomJS in Node to capture the screen or using a client-side PDF renderer (e.g. jsPDF). Out of these, my feeling is that PhantomJS would provide the most flexibility/browser compatibility. Also, I need to produce several different reports depending on the user role, so having all the code to produce the reports within the browser is not desirable. But I am totally stuck as to how to access ‘what the client sees’ using the MEAN stack. PhantomJS would need to effectively be logged in as the client, and have access to the six choices for graphs that the client has made.
From my research, using PhantomJS would require creating an html page, somehow transferring what the client sees/data/graph choices to it, and then capturing that to render to a PDF, before sending back to the browser. One way might be to pass the required information back to Express (with a POST?) and then rendering a server-side html page which PhantomJS could be pointed to, but I have no idea how to achieve this (or if it's possible). Another possibility would be to store the client report data, choices, etc in the database and set off a task to render the PDF and send it back to the browser when done, but again, I have no idea how to achieve this.
I have read about cookies in PhantomJS or navigating through the login page using code, but this seems to be a cumbersome way to achieve this. Can an html file be created server-side, with chart.js (or another charting library) injected (and angular?) and all the required user data/chart choices for PhantomJS to render to a PDF? I guess in some ways I need to be able to use a PDF generator, charting library, etc server-side to create a PDF.
Any advice (with possible code examples) on how to achieve this would be appreciated.
I guess I had the same problem as you (only I was using Laravel in server side).
The idea I came up with was to convert the canvas generated by angular-chartjs to images (using toDataURL() on the canvas elements)
$('.theCanvas').each(function () {
var canvas=this;
img=JSON.stringify(canvas.toDataURL());
});
http://plnkr.co/edit/PkZiqYynzQXehbe6p1eH?p=preview
and then sending the images to the server to create the pdf , and finally sending the user the link to the created PDF.
In my case, they are plenty of packages to generate a PDF from an html in server side, and I don't know if a tool exists for Node.
I hope this helps.
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
I'm looking for a RTE javascript library (e.g. tinyMce) to allow user to create rich web content. I'm very keen to find one that is:
lightweight (not a must)
allow image upload that can transform binary data into "data uri", i'd like to embed uploaded images into the page that the user is editing. If this feature is not provided with any RTEs, please recommend one that may extend this function easily.
multiple languages support including asian languages.
preferrably work as a jQuery plug-in.
Please share your experience if you have done this before.
I'm looking a quick way to add an (multi) image unloader with client side crop to an ASP.NET MVC site and for some reason the search seems to be much more complicated than I thought :(
upload image (can be via form post or custom, just has to work with ASP.NET)
custom crop possibility before upload
(preferred) multiple images at once
It doesn't matter if js/jquery, silverlight or flash is used, it just has to work, its an internal application and I can force people to have the necessary plugins installed.
Basically this is exactly what I want:
http://i-load.radactive.com/
But they are out of business and it seems impossible to get a license :(
**UPDATE**
This should be an all in one solution, I currently do not have the time to figure out how to connect multiple components.
I'm willing to purchase a component that does this, but I simply can't find one, which I find rather strange.
An internal application where you are comfortable with ASP.NET then Silverlight would be the good direction to look in.
There is free multiple file uploader which is designed to work with an ASP.NET server end here: http://silverlightuploader.codeplex.com/
There are number of ways to manipulate an image in Silverlight, either natively or with other Silverlight tools such as: http://writeablebitmapex.codeplex.com/
Finally you can re-encode images to common formats such as PNG with: http://imagetools.codeplex.com/
Whether you could actually combine these as is to acheive your goals would be another matter.