How to convert DOCX to ODT format using javascript? - javascript

I am working on a in-website document editor(word and excel document). So far I am able to edit ODT files using WEBODF. Is there any way to convert DOCX file to ODT using javascript so that i can use the file in the editor? any alternatives for editing word and excel documents inside a website? I have tried saving the file in OneDrive and then using the share link to open editing on sharepoint but this editor cannot be inserted inside an website and can only be done in a new tab? i need the editor inside the website as i need to implement azure versioning of the documents

WebODF is an awesome tool to be used as an online editor. Assuming you have no restrictions implementing a separate backend server, you can use libreoffice, which gives you a command line utility to exactly perform that job. You can convert docx file to odt file using the following command -
soffice --headless --convert-to odt <input file>.docx
The approach would be to create an API
Which would take docx file as input
Store that file temporarily somewhere and run the above command
Serve the converted odt file and delete the temporary files.
If you want to store those files in the server, then you can maintain a database to achieve that as well.
To take care of restricted cross origin policy, you can implement AJAX calls in the front-end to perform file uploading and viewing operations using Javascript blobs.

Related

Reading local excel file in browser with read-excel-file.js

I'm trying to create an html table that is based on data coming in from an excel sheet. I plan on using a javascript script to convert the excel data into an html table using read-excel-data.js. I have the excel sheet locally, but am not sure how to send the excel file with the html/js/css to the browser. So in my javascript file when I try to call readXlsxFile("data.xlsx"), data.xlsx is not found because it does not exist within the browser. Is there a way for me to send data.xlsx to the browser without having to manually upload with an input type="file" element?
For obvious security reasons, the browser should not allow this at all except in the case of a user action, such as file input. In fact, think what implications it would have if a Web site could explore and read/write data from the file system on which it is running.
You can only directly receive files from agents such as web servers or similar applications via functions such as fetch(...)

Creating a web UI for an ftp file server that can archive folders as ZIP to download

I'm trying to create a file server to serve a bunch of files for download and have a web-based UI to search/filter and download the files.
Right now i'm using a basic FTP server and i'm planning to create a simple (flask+js) web app that will redirect me to the ftp url for the selected file so it can be downloaded. The web app is needed so I can create my own tagging and filtering system.
However, i'm having trouble finding out how to download whole directories and folders as a zip. Basically like how google drive can have a "Download as zip" function while still keeping the raw folder available for browsing.
Is there a way to do this?
This involves working with "blobs", a JavaScript way of dealing with streamable binary data.
I haven't tried this particular library myself, but there's an article here about using the JSZip library specifically for the kind of thing I think you're talking about: https://davidwalsh.name/javascript-zip

How to generate an excel file with file attachments in the cells programmatically using Node.js or browser javascript?

I know how to generate a simple excel file using Node.js or browser javascript. However I can't find any documentations on generating an excel file where some of the cells are file attachments (not just urls). Note: The attachments data will be obtained via a 3rd party api as suppose to local files. But I don't think that should matter. Thanks!

How to display Microsoft .doc or .docx formats in a webpage?

I'm trying to display word documents in a browser without relying on cloud transcoders such as google docs.
For .pdf I use pdf.js
for odt I use webodf
How can I display .doc ?
How can I display .docx ?
I'm not interested in editing files, just viewing. And I'd prefer keeping the codec on the client-side, in (compiled) javascript.
I don't think there is a way to directly show doc and docx documents in a browser, unless you first convert them on the server side, and then use a library like WebODF to display them in the browser.
You can use Node.js for such server-sided conversion, which makes it lightweight and cross-platform.

Hope to create gmail attachment preview like functionality using angularjs

I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.

Categories

Resources