JS下载文件方法(谷歌下载超过3M,downloadJS会报网络错误)

一、form表单提交

$('#get_res').on('click', function () {
    var form = $("<form>");
    form.attr("style", "display:none");
    $("<input>", {name: 'fileid', value: file_id}).appendTo(form);
    $("<input>", {name: 'path', value: docx_path}).appendTo(form);
    form.attr("target", "");
    form.attr("method", "get");
    form.attr("action", path + '/download');
    $("body").append(form);
    form.submit();
    });

二、download.Js

//下载开始
    $('body').on('click','.opendown',function () {
       $.ajax({
            url:'/showfile',type:'post',data:{'bianhao':$(this).text()},
            traditional: true, datatype: 'json',
            success: function (args) {
                console.log(args);
                var res = JSON.parse(args);
                console.log('公司',res.company);
                console.log('数据',res.data);
                layui.use('layer', function () {
                    layui.layer.open({
                        type: 1, shadeClose: false,
                        title: '下载列表', area: ['320px', '300px'],
                        content: createhtml(res)});
                });
            }
        });
    });
    //JS生成下载列表
    function createhtml(res) {
        var str = '';
        str += '<div id="my_model">\n<ul>\n' ;
        if (res.data instanceof Array) {
            for (var i = 0;i<res.data.length;i++){
                str+= '<li class="my_download" title= "'+ res.company +'">' + res.data[i] + '</li>'
            }
        }else {
            str+= '<li class="my_download" title= "'+ res.company +'">' + res.data + '</li>'
        }
        str += '</ul></div>';
        return str
    }
    //获取文件类型
    function getType(file){
            var filename=file;
            var index1=filename.lastIndexOf(".");
            var index2=filename.length;
            var typename = filename.substring(index1,index2);
            return typename;
    }
    
    //点击文件名触发下载
    $('body').on('click','.my_download',function () {
        var thisdata = $(this).text();var filetype = '';
        var datas = {'docname': thisdata,'supplier': $(this).attr('title')};
        console.log(thisdata);
        console.log(getType(thisdata));
        if (getType(thisdata)=='.pdf'){filetype = 'file/pdf'}
        if (getType(thisdata)=='.jpg'){filetype = 'image/jpg'}
        if (getType(thisdata)=='.png'){filetype = 'image/png'}
        $.ajax({
            url:'/getfile',type:'post',data:datas,
            success:function (args) {
                var res = JSON.parse(args)
                console.log(res);
                console.log(res.data);
                //此处引用了download.js 接受字节流 res.data为字节流编码
                download("data:"+ filetype + ";base64,"+res.data, thisdata, filetype);
            }
        })
    });
    ////下载结束

 

三、Blob方式

if (brow == 'Chrome') {
      //如果浏览器为谷歌(数据流大于3M时使用downloadJs下载会报网络错误)使用Blob方式下载
      Blobdownload('数据流', '文件类型')
    } else {
      //使用 Download Js 插件 方法
      download("data:" + '文件类型' + ";base64," + '数据流', "文件名", "文件类型")
    }
    // Blob下载主方法(数据流,文件名,文件类型)
    function Blobdownload(content, filename, filetype) {
      //调用base64ToBlob方法生成Blob对象
      const blob = base64ToBlob(content, filetype)
      const a = document.createElement("a")
      const url = window.URL.createObjectURL(blob)
      const filename = filename;
      a.href = url
      a.download = filename
      a.click();
      window.URL.revokeObjectURL(url)
    }
    // 生成Blob对象的方法(base64流,文件类型)
    function base64ToBlob(data, type) {
      //window.atob用于解码使用 base-64 编码的字符串
      const bytes = window.atob(data);
      //ArrayBuffer又称类型化数组,类型化数组是JavaScript操作二进制数据的一个接口
      const ab = new ArrayBuffer(bytes.length);// 生成了字节长度为bytes.length的内存区域
      const ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: type })
    }

    function myBrowser() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isOpera = userAgent.indexOf("Opera") > -1;
      if (isOpera) {
        return "Opera"
      }; //判断是否Opera浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
      } //判断是否Firefox浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
      }
      if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
      } //判断是否Safari浏览器
      if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
      }; //判断是否IE浏览器
    }