We Keep Coding

Exported HTML table to excel giving warning while opening the file using office Excel

I am trying to export HTML table to xls format. But when I try to open the file using Excel, I am given a warning message. The waring message:
I using this lines of code:
var file = new Blob([ html.outerHTML], {
type: "application/vnd.ms-excel"
});
var url = URL.createObjectURL(file);
var filename = dateSelected + "-" + "attendance" + ".xls"
//here we are creating HTML <a> Tag which can be trigger to download the excel file.
var a = document.createElement('a');
a.id = "export";
document.body.appendChild(a);
//here we are checking if the bwoswer is IE or not if IE then we use window.navigator.msSaveBlob function otherwise Go with Simple Blob file.
if (window.navigator && window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(file, filename);
a.click();
document.body.removeChild(a);
document.body.removeChild(html);
} else {
a.download = filename;
a.href = url;
a.click();
document.body.removeChild(a);
document.body.removeChild(html);
}
I tried to change the blob type but nothing is working. How can i solve this issue?

The Problem
If you open the file in notepad or other text editor, you will find that what is saved in the file is html or xml. However, open any XLS file generated by Excel, and you will see unreadable binary characters.
Since Excel can open xml files, you don't feel that there's something wrong under the hood. However the *.xls format is binary in nature and is different from xml. Excel would warn you if the file extension doesn't match the underlying file format. Google for excel extension hardening and you would know what I'm talking about.
The Solution
You need to save it in that (excel binary) format if you want excel to recognize it as XLS file. There are so many libraries available (some paid and some free) that can help you generate true XLS files. I would recommend you using one of those. The other way is to switch to another format like XLSX. The problem would remain same though. Unless excel is able to match the file extension with the file format, it will continue to show this warning. This is a security measure.
AFAIK there's probably a registry hack to get around this problem. But I won't recommend you that, because it will open you to the security problem for which this feature is there in Excel.

Export html table to excel file open security warning issue

I am using jquery plugin tableExport.jquery.plugin to export html table.
Plugin is working fine.
I am using excel 2007.
Issue:
When I open Exported file it says
The file you are trying to open is in different format than specified by the file extension.etc
When I say yes it open the file and I can see my content.
But I don't need to see the warning that is coming up after opening.
// For BIFF .xls files
var data_type = 'data:application/vnd.ms-excel;filename=exportData.xls;' + base64data;
// For Excel 2007 and above .xlsx files
// var data_type = 'data:application/vnd.openxmlformats-
officedocument.spreadsheetml.sheet;filename=exportData.xls;' + base64data;
I tried both above methods but It never worked.

There is no way to remove this warning if you are using jquery plugin or any plugin which export html as excel.
Its excel ability to open an HTML table in excel. Since file extension is .xls and file format is HTML. It will always show you this warning.
Its better to look for javascript library which actually create an xls file otherwise go for server side excel generation if you really want to remove this warning.

How to load the contents of a local text file by name using Javascript and HTML 5?

Working in Chrome, loading a local html or JS file.
I found many examples of how to load a file that is selected using the Choose File input.
However, didn't figure out how to do it given a file name without using the Choose File input.
The Choose File input returns a File object.
How to create the File object without the Choose File input?
From the File API:
new File(
Array parts,
String filename,
BlobPropertyBag properties
);
But didn't figure out what the parts and properties would be.
Edit: Use case:
I have code coverage results generated as part of a test suite. It is stored as JSON (which is easy to read), but I need to display it with the source code.
So the feature is to load the source code and JSON data, and render them together on a web page using HTML and Javascript.
The file would be opened from the browser and lives on the local machine. There is no server.

The browser cannot load arbitrary files by name from your filesystem without special extensions or other shenanigans. This is a security policy to prevent random web sites from reading files from your hard disk as you browse the internet.
If you're down to do something special like if you want to write a chrome app, you could get access to some nice APIs for accessing the filesystem:
https://developer.chrome.com/apps/fileSystem

The File constructor doesn't read a file from the harddrive, but rater make a virtual file, consider this:
var file = new File(["some", "content"], "/tmp/my-name.txt");
var reader = new FileReader();
reader.onload = function() {
console.log(reader.result); // somecontent
};
No file will be read or stored on the clients machine.
If you are talking about creating files in nodejs then you should take a look at fs.

For security reasons all browsers don't support predefined values on file fields so the answer is you can't.

Upload file inside chrome extension

I need to add a browse button inside my Chrome extension. Users click it and choose a file. I then want to retrieve the file contents (bytes) and do some work on it.
I don't want to have to submit the file to a remote server and then get the response (if that's even doable from inside a Chrome extension), it should be all client-side.
Is this doable inside Chrome extensions?

You should be looking at the FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
A very good basic example of using this interface is in this question.
A minimal example: suppose that you have an <input type="file" id="file"> with a text file selected.
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.onload = function(e){
console.log(e.target.result);
}
reader.readAsText(file);
If you need methods other than reading as text (i.e. binary data), see the docs.
Also, this is a good overview: Using files from web applications

Regarding your question it is totally feasible to load and process a file within an extension. I implemented it using message passing https://developer.chrome.com/docs/extensions/mv3/messaging/.
Here is an example of how you can implement it, in my case I used the input file to load an excel. This is my public repo.
https://github.com/juanmachuca95/gomeetplus

Downloading a file to the file system in WinJS

We are developing an app that is to download files from HTTP URLs, the extensions/file types of which we will not know until runtime. We've been following this tutorial as a starting point, but since we aren't dealing with images, it hasn't helped us.
The issue is that the code in the tutorial will get you a Blob object and I can't find any code that will allow us to either:
Convert the Blob to a byte array.
Save the Blob straight to the file system.
The ultimate goal is to seamlessly save the file at the given URL to the file system and launch it with the default application, or to just launch it from the URL directly (without the save prompt you get if you just call Windows.System.Launcher.launchUriAsync(uri);).
Any insight anyone might have is greatly appreciated.

Regarding downloading content into byte array:
Using WinJS.xhr with the responseType option as 'arraybuffer' will return the contents in ArrayBuffer. A javascript typed array can be instantiated from the ArrayBuffer for example UInt8Array. This way contents can be read into byte array. code should look something like this:
// todo add other options reqd
var options = { url: url, responseType: 'arraybuffer' };
WinJS.xhr(options).then(function onxhr(ab)
{
var bytes = new Uint8Array(ab, 0, ab.byteLength);
}, function onerror()
{
// handle error
});
Once you take care of permissions to save the file to file system either by user explicitly picking the save file location using SaveFilePicker or pick folder using folder picker - file can be saved on local file system. Also, file can be saved to app data folder.
AFAIK, html/js/css files from local file system or the app data cannot be loaded for security reasons. Although DOM can be manipulated under constraints, to add content. I am not sure of your application requirements. You might need to consider alternatives instead of launching downloaded html files.