文件导出也可以这么写【js+blob】

最新推荐文章于 2024-08-31 11:08:40 发布

weixin_30363509

最新推荐文章于 2024-08-31 11:08:40 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lilunjia/p/8580054.html

本文介绍了前端实现文件导出的基本原理及其实现方法，包括使用GET请求导出以及利用AngularJS进行POST请求导出Excel文件的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件导出在软件开发中是个比较常用的功能，基本原理也很简单：

浏览器向后台发送一个Get请求
后台处理程序接收到请求后，经过处理，返回二进制文件流
浏览器接收到二进制文件流后提示下载文件

调用的js方法如下 , 通过URL传值的方式Get请求到后台处理程序

function expExcel(){
    
    var url="../function/expExcel?ExportUnit=谨华控股";
        
    window.location.href=url;
}

这种方式虽然简单实用，但在有些情况下也不适用。比如只能采用GET方法，传递参数不能太复杂。一般需要在调用的页面创建一个隐藏iframe。。。。。

下面一个angularjs 的一个导出实例

self.excel = function() {
    var dataUrl = "http://www.order.com/list/excel";
    $http({
        method: 'post',
        url: dataUrl,
        data: {},
        transformRequest: function(data) {
            return $.param(data);
        },
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        responseType: 'arraybuffer'
    }).success(function(data) {

        var blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });

        var da = new Date();
        var fileName = "数据导出" + da.getFullYear() + '-' + (da.getMonth() + 1) + "-" + da.getDate() + ".xlsx";

        self.saveas(blob, fileName);

    });

};

self.saveas = function(blob, fileName) {
    if (window.navigator.msSaveOrOpenBlob) { // For IE:
        navigator.msSaveBlob(blob, fileName);
    } else { // For other browsers:
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
    }
}

一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。

Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。

var blob = new Blob([data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });

转载于:https://www.cnblogs.com/lilunjia/p/8580054.html