AngularJS 无刷新下载文件

/**
* Excel文件下载
*/
MetronicApp.service('ExcelFileDownLoad', ['$http',function($http) {
    this.downLoad = function(url, data, fileName){
        $http({
            url: url,        //请求文件地址,服务端返回的是二进制数据流
            method: 'post',
            responseType: 'arraybuffer',    //防止乱码
            contentType: 'application/json',
            data: data
        }).success(function (data, status, headers) {
//使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件(兼容老版本)。而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为xlsx
            //客户端接收后转换为指定文件格式的blob,最后创建blob对象的URL
            let blob = new Blob([data], {type:'application/vnd.ms-excel'}, decodeURI(headers(){'x-filename'}));
            //把它放在A标签的href上 就会自动下载了
            var anchor = angular.element('<a/>'); // 创建a元素
            anchor.attr({
               href: URL.createObjectURL(blob),  //blob对象的URL放在a链接上就自动下载
               target: '_blank', 
               download: fileName
            })[0].click();                 //当前元素绑定单击事件     
        })
    }
}])

···
ExcelFileDownLoad.downLoad("/downloadExcel", $scope.vo, "标题")
知识点:blob —在客户端处理二进制数据的js对象类型,包含二进制数据的容器

认识blob对象
input标签有一个上传文件的类型,type=’file’,当用户点击上传文件后,会返回一个FileList对象,file对象就存在于FileList对象中,file对象继承自blob。

// 参数一:需要被处理的数据序列,可以是任意格式的值;参数二:配置的参数,指定MIME类型
let blob = new Blob([data], {type: "application/vnd.ms-excel"});
// 属性
// 1、blob.size  ; 对象中所包含的数据的大小(字节)
// 2、blob.type  ; 一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。
// 方法
// 1、blob.slice([index, length, contentType]) ;返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据
// 分片上传文件的案例
let chunk = 1024 * 1024;   // 每个文件切片大小定为1MB
let file = document.getElementById("file"); //获取input文件
initUpload();
function initUpload(){
    file.onchange = function(){
        let blob = file.files[0];
        let blobs = [];
        if(blob){
            for(let i=0;i<Math.ceil(blob.size / chunk);i++){
                blobs[i] = blob.slice(i * chunk, chunk);
            }
        }
        // 将blobs文件分别上传到服务器
        upLoad(blobs)
    }
}

// 上传file对象组成的blobs数组对象
//表单文件上传  new FormData(); 异步上传二进制文件 (类比:jQuery方法中的serialize(), 作用就是表单序列化,查询字符串形式获得类表单post/get的数据给Ajax请求:id=123&username=root)
FormData是浏览器原生的,且支持二进制文件
function upLoad(data) {
  let url = $("#albumItemCommentURL").val();
  let params = {"mediaType": 3};
  let audioBase64Data = $("#audioBase64Data").attr("src");
  //获取图片的base64
  //创建formData对象
  let formData = new FormData();
  //添加图片的blob
  if (audioBase64Data) {
       let blobBin = dataURLtoBlob(audioBase64Data);
       let fileType = blobBin.type.split("/")[1];
       params.fileType = fileType;
       formData.append('file', blobBin);
 }
 //添加请求参数的blob
 let dataWithType = new Blob([JSON.stringify(params)], {type: "application/json"});
 formData.append("data", dataWithType);
 //上传数据
 $.ajax({
     url: url,
     type: 'post',
     processData: false,
     contentType: false,
     data: formData,
     dataType: 'json',
     success: function (data) {
        let obj = eval(data);
        if (obj.responseCode == '0') {}
     },
     error: function (jqXHR, textStatus, errorThrown) {}
  });
}

/* 工具方法:dataURL(base64字符串)转换为Blob对象(二进制大对象) */
//data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
function dataURLtoBlob(dataurl) {
   let arr = dataurl.split(',');
   let mime = arr[0].match(/:(.*?);/)[1];
   let bstr = atob(arr[1].replace(/\s/g, ''));
   let n = bstr.length;
   let u8arr = new Uint8Array(n);
   while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
   }
   return new Blob([u8arr], {type: mime}); //值,类型
}

// 创建一个链接下载文件的案例
function downLoad(url, data, fileName){
    $http({
        url: url,
        method: 'post',
        responseType: 'arraybuffer',
        contentType: 'application/json',
        data: data,
    }).success(function(data, status, headers){
        // 后台返回的数据存在blob容器中
        let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
        // window.URL对象可以为Blob对象生成一个网络地址,结合a标签的download属性,可以实现点击url下载文件
        let a = document.createElement("a");
        a.attr({
            href: window.URL.createObjectURL(blob),
            download = "文件.xls",
        }).click()
    })
}

//获取剪切板上的数据
document.addEventListener('paste', function (e) {
    let cbd = e.clipboardData; // 获取剪切板数据
    //创建读取器对象FileReader 
    var read=new FileReader();
    for(let i = 0; i < cbd.items.length; i++) {
       let item = cbd.items[i];
       if(item.kind == "file"){
          let blob = item.getAsFile();  
          if (blob.size === 0) {
              return;
          }
          console.info(blob);
          read.readAsText(blob);     //开始读取文件
         //read.readAsDataURL(blob); //读取图片地址数据
          read.onload=function (e) {  //数据读完会触发onload事件
            console.log(read.result);   //read有个result属性存放这结果,从result获取到数据
          }
      }
   }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值