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


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

    • 浏览器向后台发送一个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"
            });
  • 相关阅读:
    41.js延迟加载的方式有哪些?
    39、[“1”, “2”, “3”].map(parseInt) 答案是多少
    38.null,undefined 的区别?
    35.说几条写JavaScript的基本规范?
    34.介绍js有哪些内置对象?
    问题解决Android studio遇到 java.lang.OutOfMemoryError: GC app:transformClassesWithDexForDebug解决方法 以及gradle优化
    Multiple dex files define
    Retrofit2.0+RxJava2.0问题
    【转】Android Shape绘制虚线在手机端查看是实线的问题
    极光使用整理
  • 原文地址:https://www.cnblogs.com/lilunjia/p/8580054.html
Copyright © 2020-2023  润新知