I'm using Node-ViewerJs to display documents of different formats in my nodejs based web app. But besides pdf, ViewerJs only supports Open Document Format.
Is there any other good solution for displaying documents of different formats (i.e. doc, docx, xls, xlsx) preferably with ability to do online editing to the document by web viewers?
PS: I'm looking for some completely self-hosted or offline (in other words) solution rather than cloud based solutions.
Try uploading your documents to google drive you can also do it via it's api's.
Then generate an embedded link of it, by following steps: (After importing in google docs)
File > Publish to the Web..;
Check the box that says “Automatically republish when changes are made”;
Click "Start Publishing";
Change “Get a link to the published data” from “Web page” to “HTML to embed in a page”;
Copy and paste the HTML code generated into your HTML webpage. it's basically an iframe so it will embed the google docs view in your webpage.
Related
There is a program in my company that generates a JSON file. I created a website (that will be live on github pages) using java script and html that displays the information from this JSON. Now I want others in my company to generate individual JSON files and be able to upload them to this website by clicking a single button. I'm thinking the button they click would generate the JSON (let's say it saves automatically as c:data.json), programmatically open the github pages website and then programmatically upload c:data.json. I do not want the json file to be stored on the website, just uploaded for one time use.
I have done a couple google searches and can only seem to find stuff on how to upload a json file in your code which I am already doing locally. I need a local file to programmatically upload, in order to be used in a github pages website. I'm new to web dev and any help is appreciated :)
OS: Windows 10
developed using: node.js, javascript, html, json, github pages.
I have been doing a lot of research and have been unable to find an answer to my exact question. I understand that having a google chrome extension that can write to local user files would be a major security breach and thankfully isn't possible. However in my extension is a .json file that is used to make a HTML webpage with links via JavaScript. The JS reads the .json file and inserts the lines of code on the html page. I am attempting to make a user interface that allows them to update and edit the .json file that is inside the extension in order to add new lines of code to the webpage, but have been unable to find anything that could make this work due to security issues. I was thinking that since the file is in the extension users should be able to modify it.
If that was confusing here is a flow of what I want to happen and where it is not working:
Works:
Users clicks on button that takes them to a webpage hosted in the extension -> when page is loaded, the javascript runs -> the JS looks at a .json file in the extension using an XMLHttpRequest, parses the data, and then inserts it into the html -> The user now see's the content that was contained in the .json file on the html page.
Doesn't work:
After this I would like to have an interface that will allow the user to edit this .json file in order to update the page as they see fit, all in the extension itself.
If it was just me using this extension I could simply use the chrome storage api's available, however this is for my team at work, who are wanting to make edits as we need. Which means we will all be editing the same .json file.
Any information regarding this would be very beneficial. Even if it's as simple as it can't be done. Either way manually editing the .json file without a simple UI is much easier than editing the html directly.
Thanks in advance!
Posts/Articles I have looked at regarding this question:
Access Local Files using a Google Chrome Extension
https://developer.chrome.com/extensions/storage
Local file access with javascript
Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
I have created a HTML project. But my main aim is to display the pdf's on my site so that users can't save or download them is this possible using (https://mozilla.github.io/pdf.js/) viewer? If so how can i do it because i'm trying to output a lot of pdfs and this just seems impossible to do looking at the code.
No, it's not possible to display native pdfs to the user without allowing them to download them. By the nature of http, they will have had to download the pdf data in order for them to be displayed.
However, you could take snapshots of the pdf on the server, and display these to the user as pngs.
There are a number of libraries that will allow you to convert the first page of a pdf to an image, I suggest you start by trying to implement one of those.
So,
At the moment I embed a base64 encoded pdf into a html page using iframe and I have no problem with this but I want to display it also on android browsers like chrome and firefox.
I also tried object or embed tag but none worked.
What should I do ?
You should try Viewer.JS or PDF.JS. If none of those work, you could possibly use Google Docs Viewer. This site will help you generate the URL for that : iTools.com. I prefer Google Docs currently because the performance is a little sluggish using both of those Javascript viewers. Keep in mind that in order for the Google Docs Viewer to work, you must have the file published to the web and accessible for Google's servers.
Another option would be to use a conversion library (such as imageMagick) to turn the PDF into an image and then offer a link to the full file. If your html is going to be viewed by other devices such as desktops, you could always check to see if Adobe Reader is installed and then, if not, offer an image instead with a link to the file. I use PluginDetect to check for support for PDFs.
There are other commercial options like iSSUU or FlexPaper but I don't have any experience with those. iSSUU is a software service that allows embedding viewers on your website and FlexPaper is a software that you buy and install to your website.
This is assuming you're trying to embed a PDF to a website. :/
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.