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

score 2 · Accepted Answer · answered Jul 31 '15 at 10:04

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)

so should the download excell button be an ? or do I need to add the alement to the body of the html page i am crating via javascript? I didn't understand — xechelonx, Jul 31 '15 at 10:11
Yes, the download button should be an ``. You can either put it in the HTML directly or add it via JavaScript. But, iIn case you add it with JS, you need to add it only once! — Tasos K., Jul 31 '15 at 10:15

score 1 · Answer 2 · answered Jul 31 '15 at 09:50

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");

score 0 · Answer 3 · answered Jul 31 '15 at 09:53

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();
                }
           }

**I want the browser to download the page as an .xlsx file when it's loaded instead of rendering it.** — Bugfixer, Jul 31 '15 at 09:56

Force the browser to download an Html Page instead of rendering it

3 Answers3