how to embed a live excel spreadsheet in html - javascript

hi i would like to know how i can embed a excel spreadsheet in a web page and change the excel numbers on the hosted file and this in turn automatically changes the webpage sheet?
would like to know if there is a jquery, javascript, css etc code to help me out
for example, book1.xls will be uploaded to the server and index.html will reflect book1.xls as a table in it. when i update book1.xls, it should automatically show in index.html the changed cells.
thanks in advance

The simple way to actually connect to an XLS is through VBScript, but your server will have to support it (which most do).
Another way would be add an ODBC to your servers connectors pointing to your XLS or MDB or whatever Microsoft data file you choose and use JavaScript or any number of languages to connect to it, retrieve data, make changes, etc. The downside is that you must have Administrative rights to the computer hosting the file. You can use a homecomputer to use as server for that file only for instance and link it to your website, but it will affect loading speeds. This will however require you to take a closer look at your home internet security...!!!...but will enable you to make 'live' changes without going to your website. This method is often used for webshops and online catalogues, places where data can change on a daily basis but a database server is undesirable.
The simplest and easiest way is as mentioned before the use of GoogleDocs, but that will require conversion of the document. You won't be using your XLS as datafile. The downside here is that if you make any changes offline (not through the website) the changes will also not be visible, because you'll be editing a completely different file. So you'll need to convert and upload it to GoogleDocs each and every time.
As you can see the method used greatly depends on how often you plan on updating the data, how much traffic you expect and how secure you want it to be.

A "live" spreadsheet can be shown in a web page via an iframe containing a Google Doc spreadsheet. You cut 'n paste the iframe markup from Google Docs and drop it into your web page. The spreadsheet is editable in GDocs. The iframe view can be set to automatically update when the ss is edited.
Perhaps, this is too bland a solution. But it works. I use it all the time.

I doubt you can do that directly from an .xls file, but if you save your Excel file as .csv, you can read a .csv file via jQuery.
There's a plugin here that displays data from a csv file as a table: http://plugins.jquery.com/project/csv2table
The same/similar question is also asked in these posts:
Read Excel data with JQuery
How to parse an excel file in JavaScript?

Related

How to edit pdf stored in a server by a webapp client?

The use case of this problem is very simple but i struggle to find a good solution for it.
I want to allow my users (through a webapp) fill some pdf files stored in server (pdf with forms, which begin more and more popular).
Actually, app like chrome or acrobat reader are able to fill them perfectly whe its open locally.
I already allow this functionnality for docx and xlsx files, for that i use Webdav and the custom protocols ms-word ad ms-excel. It works perfectly.
For pdf, I didnt found equivalent. Its look the mains pdf reader/editor doesn't implement this protocol. Whe we open distant file with these tools, they failed for write permission when save or they try to save the file locally) .
Another option i take a look was the new file system access api (https://web.dev/file-system-access/). But again i wasn't able to make it working properly. The main problem here is how we can edit the file.? Im able with this api to dowload the file locally and keep the filehandler to retrieve the updates, but i blocked on how i can edit the file ? like an option on the fileHandler to say "Open this file with default editor on the OS". this would be perfect. But for now to edit the file i have to manually open it on the eplorer. i can't ask my end user to do that there is too many risk they edit the wrong file.
Another option on the table is the different javascript library for editing PDF, but these last one looks all very expensive, usually very heavy on the client side, with advanced features definitively i don't need. I just want to fill the forms and retrieve the pdf completed. So i would like to avoid this option.
Last option i take a look, i already use pdf.js (from mozilla) and pdf-lib.js in my app for some drawing features. I was thinking
rendering the pdf with pdf.js
retrieve all the forms fields (id, type, size, position) of the pdf with pdf-lib
generate html input write on the top of the pdf with the informations given by pdf-lib
i let the users fill the input and click on a save button whe he finished
on the save, i edit my pdf with pdf lib, i set the value of all my forms fields by taking value of the corresponding html input, and i retrieved the pdf updated.
This solution look for me the more "feasible". But im afraid of the volume of development, on how it will render, deal with zoom, rotation, etc. i would like to not have my custom solution.
I precise my webapp target chrome so it make me crazy to not be able to use the chrome pdf viewer/editor to do what i want.
PS : i struggle to post this question on stackoverflow. the previous one was deleted witout i had precise reasons. i try to be more specific on this one, but please if its such a dumb question, please answer it
I feel your pain, this is currently not possible. Adobe acrobat can open PDFs from webdav locations (simply call acrobat.exe and pass in the WebDAV UNC and it will work) but there is no way to trigger this from the browser.
If you are able to deploy software to your customers machines, you could create a custom URL scheme to do this...

Save data in a local file with HTML, Javascript?

I'd like to develop a simple offline html page to track my working hours. I'd need an offline file where I can put all my information and then retrieve them through Javascript. What do you suggest me? XML, Json, a DB? I need a "physical" local file because I would like to take my folder with all my html, css, and js files, put it in a pen drive and then open it in another computer. So something portable.
You can't do that offline; HTML/JavaScript doesn't have the ability to write to the filesystem. You can create cookies or use .localStorage in JavaScript, but that would only be local to your browser and won't be visible on another computer.
The closest thing you could possibly get is to write a page that stores data in localStorage and then run it from a portable version of your favorite browser that you also keep on your portable drive.
If you are not set on only using HTML, you might look into doing a C# windows form application.
You can find more on how to leverage that StreamWriter Class here:
https://msdn.microsoft.com/en-us/library/system.io.streamwriter(v=vs.110).aspx
However as for file type, a local JSON or .csv file should do the trick.

I want to convert an huge excel workbook (with multiple tabs) and few columns and rows hidden on WEB Page

When I tried saving the excel sheet in HTML and displaying I've got few problems:
The numbers in each cell are distorted
Hidden rows and columns are displayed (I want them to keep hidden)
Top rows of my Excel sheet are freezed, I want them to keep freezed.
The Sheet is updated daily and I want the changes to be reflected in Web as well.
Could you suggest a way other than saving excel sheet in HTML? Any other way I could start this project?
P.S: I hold the knowledge of HTML, CSS, JavaScript.
Do I need to learn any additional skill set to get pull this project?
If you are running IIS or can otherwise run .NET code on your server, you can use the Open XML SDK. There are plenty of examples of using the SDK. Apparently, it even works with Mono if you're using Apache.
If not, if you've got some machine that can get to the Excel file and copy files to your web server and from which you can run a scheduled task, you can schedule a task on that machine that using the Open XML SDK to translate the Excel file to HTML, then upload that HTML to the server.
It doesn't have to be a complete page; it can just be the parts of the HTML you need. You can then have some JavaScript on the page that fires off an AJAX request to get the HTML file. This is true regardless of whether your serving content dynamically generated by code running under IIS or a static file generated by code elsewhere and pushed to the server.
You might have something like:
<!-- page where the spreadsheet should go -->
<div id="put-excel-worksheet-here"></div>
Then:
$.ajax({
url: "/path/to/converted-data-partial-html.html"
, success: function(excelHtml) {
$("#put-excel-worksheet-here").append($(excelHtml));
}
});
And your ASP.NET page response or scheduled task would convert your Excel file to something like <table><thead><tr><th id='column-one-th'>....
Either way, I'd recommend you work with a copy of the file rather than the original, since I've found Office can get a little finicky with files being open in two places at once.
As for freezing the top rows, here's a fiddle with an example.
Good luck!
edit: As an alternative to putting millions of cells worth of HTML onto a single page, it might make sense load the Excel data into a relational database like MySQL or Microsoft SQL Server and do some custom web development to pull the data out of that with pagination and filters and other nice reporting features.
If the data in the Excel file is coming OUT of another system, you might be able to set up a system-to-system integration. If not through an integration, though, the Open XML SDK is how I'd do it. You don't have millions of rows to put up per your comments above, so this suggestion doesn't make sense.
edit: Oh, and I recommend your scheduled task run during a time when people aren't likely going to be using the system. If, for example, your users are all in a few adjacent time zones, have the task run at 3:00 AM in the Eastern-most time zone.

Possible download / upload manager embedded on html page with access to local filesystem

As the title indicates i want to have a certain application get access to the local file system. To describe why i will illustrate my situation:
I am a running a IIS WebApplication with the C# MVC 4 Framework as backend module. The site solely consists of HTML, CSS markup and some JS. The page will be loaded in IE11+ (Edge) only. For the standard procedure of displaying and accessing data from as well as sending data to the server this works quite fine.
On a certain page I want the user to be able to upload a file using a simple file dialog, like the one you can initiate with a simple <input type="file"> tag. I also want to offer the posibility to download files from the server but need to know where files has been saved / will be saved to.
As described on a lot of different websites, just like this one here, the HTML5 File API does a great job but will not be able to return the full qualified filename including the local path directions, same for JS accessing the file object.
As my research confirmed HTML5, JS and also SWF (Flash) will not report detailed information because they are all sandboxed applications or restricted by RFCs. I already unterstood and appreciate the effort to secure my trips to internet.
But in this case do need the paths where a file was upload from and the file has been downloaded to.
So my question is, what is the best way to expose the full path directions for a up- as well as downloaded file to report them back to the server?
Is it possible to embed a SWF object inside HTML which will run inside an Adobe AIR sandbox or is a signed JAVA Applet still the one and only solution to accomblish this security breaking task?
A solution i would also apreciate would be the possiblity to ask the user to get access the file system, like you grant access to the web push service to receive notifications.
Also if there is a possible solution which may suite my circumstances please let me know by adding some simeple examples / revealing some factful links, thanks in advance.

display external text from txt, html etc. (hosted on cloud) on web page

I manage a small web page for a relative's business. They want to provide notes on the page for the visitors regularly (opening times, news etc.) but cannot code the web page themselves.
Is there a way to embed a news scroller, text field, whatever on the page - however, the text displayed there then comes from an external source they can manage like a htm, txt, json (whatever) file hosted e.g. on their Google Drive that they simply need to change and see the edits directly in the web page (the file would be public; the URL to be embedded in the web page code).
Is there a solution or an easier way to achieve it? thx
You can use file_get_contents() if I got you right.
To achieve this, first you need to create a portion on the website to display the news or whatever external dynamic content you want.
Then you need to develop complete APIs for that site and then hit them from your website (Keep a secret key for safety). Your API can do everything you program it to do. (E.g You can put the news in database or create publicly accessible files through it)
When this is achieved, you can then fetch the data into the portion created for news etc. (automated through programming)
Using PHP you can achieve all the above mentioned steps.
That way you will just have to push/send the data from your APIs and the actual site will keep getting updated without any further action required.
Hope that helps.
If they can write the HTML and make it available at a public URL, you can simply embed it using <iframe> in HTML.

Categories