Question

我有一个脚本在新窗口中弹出一个页面，数据通过AJAX调用收到。

代码是：

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

            });

现在，我希望浏览器将该页面下载为.xlsx文件当它被加载而不是渲染它时。

有可能吗？无法解决这个问题。

我尝试使用meta但他们只是被忽略了。

谢谢！

信息：这是一个ASP.NET MVC WEB APPLICATION

Answer 1

您可以执行以下操作。您创建了一个<a>代码，并为其提供了一个自定义对象网址作为其href属性。

这将导致<a>强制下载mimetype集。

您可以将HTML放在content变量中。

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

注意：您只需将<a>仅附加到<body>一次，而不是每次都执行此代码。

这是一个演示http://jsfiddle.net/5dyunv6w/（下载将在您打开页面时开始）

Answer 2

您只能使用服务器端语言

执行此操作

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

Answer 3

使用此功能下载文件。

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

强制浏览器下载Html页面而不是渲染它

3 个答案: