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瀏覽器
    }