Force the browser to download an Html Page instead of rendering it
Question
I have a script that pops up a page in a new window, the data are recieved via an AJAX call.
the code is:
$scope.downloadExcell = function () {
$http.post('/Monitor/DownloadExcell', { model: $scope.formModel })
.success(function (data) {
var html = "<!DOCTYPE html><html><head><meta http-equiv="
+"'Content-type' content='application/vnd.ms-excel' />"
+"<meta http-equiv='content-disposition' content='attachment; filename=fegc.xls' />"
+"<title>_excell</title></head><body>";
html = html + "<table style='width:100%;' >";
html = html + "<tr>";
for (prop in data[0]) {
html = html + "<td>" + prop + "</td>";
}
html = html + "</tr>";
for (key in data) {
html = html + "<tr>";
for (prop in data[key]) {
html = html + "<td>" + data[key][prop] + "</td>";
}
html = html + "</tr>";
}
html = html + "</table>" + "</body>" + "</html>";
var w = window.open();
$(w.document.body).html(html);
});
Now, I want the browser to download the page as an .xlsx file when it's loaded instead of rendering it.
is it possible? Can't figure this one out.
I tried with the meta but they just get ignored.
Thank you!
INFO: this is an ASP.NET MVC WEB APPLICATION
3 answers
solution1
1 2015-07-31 09:50:52
You can only do that on a with a server side language,
// PHP
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header("Content-Type: application/vnd.ms-excel; charset=utf-8");
header("Content-disposition: attachment; filename=filtro.xls");
solution2
1 ACCPTED 2015-07-31 10:04:25
You can do the following trick. You create a <a> tag and you give him a custom object URL as its href attribute.
This will cause the <a> to force download with the mimetype set.
You can put your HTML in the content variable.
var name ='excel-file.xlsx'; // The name of the file to be downloaded
var content = 'data'; // The contents of the file
var mimetype = 'application/vnd.ms-excel'; // The mimetype of the file for the browser to handle
// Add the <a> in the end of the body. Hide it so that it won't mess with your design.
$('body').append('<a class="download-trigger" style="display:none;"></a>');
var a = $('.download-trigger')[0];
a.href = window.URL.createObjectURL(new Blob([content], {
type: mimetype
}));
a.download = name;
a.textContent = 'Download';
a.click();
Note : You only need to append the <a> to the <body> only once, not every time you execute this code.
Here is a demo http://jsfiddle.net/5dyunv6w/ (download will start when you open the page)
solution3
0 2015-07-31 09:53:48
Use this funtion to download file.
function SaveToDisk(fileURL, fileName) {
//alert("yes i m working");
// for non-IE
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = fileName || 'unknown';
var evt = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
// for IE < 11
else if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, fileName || fileURL)
_window.close();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.