javascript 實現原生下載的各種情況

還記得第一次做文檔下載的時候，基於windows.open('download_url')的方式下載。在某天某月某日，有領導突然review我的代碼，此種方式遭到吐槽，尷尬不已。才痛下決心決定梳理一下前台的下載功能

windows.open缺點 1.用戶交互不友好 2.對於圖片類型的文件，會直接打開瀏覽器，而不是下載等等，自己領悟

下方的方式很多，請根據實際業務需求動態選擇

1：一般通過a標簽的方式下載，利用H5的Download屬性

代碼示例如下：

場景：適用於現代瀏覽器，url是下載地址，而不是文件流，常用於GET請求

function downLoad(downUrl, fileName) {
  let a = document.createElement("a");// 創建a標簽
  if ('download' in a) {
    a.download = fileName;// 設置下載文件的文件名
  }
  (document.body || document.documentElement).appendChild(a);
  a.href = downUrl;// downUrl為后台返回的下載地址
  a.target = '_parent';
  a.click();// 設置點擊事件
  a.remove(); // 移除a標簽
}

downLoad(URL, 'test.xlxs') //URL下載地址

 

如果后台給的是文件流，則利於Blob對象包裝一下文件流，常用於POST請求

代碼示例如下：

function downLoad(content, fileName) {
  let a = document.createElement("a"),// 創建a標簽
      blob = new Blob([content]);  //用Blob對象包裝一下文件流

  if ('download' in a) {
    a.download = fileName;// 設置下載文件的文件名
  }
  (document.body || document.documentElement).appendChild(a);
  a.href = window.URL.createObjectUrl(blob);;// content為后台返回的文件流
  a.click();// 設置點擊事件
  a.remove(); // 移除a標簽
}
downLoad('我是文件流我是文件流', 'test.txt')

如果是POST請求，可以借助axios實現，配合FileReader對象。

axios.post(downloadUrl, this.searchParams, {
  responseType: 'blob'
}).then(res => {
  const blob = res.data
  const reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onload = (e) => {
    const a = document.createElement('a')
    a.download = `表格名稱.xlsx`
    a.href = e.target.result
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }
}).catch(err => {
  console.log(err.message)
})

2：借助Base64實現文件的下載

對於非文本文件，也是可以借助JS下載的，比如下載圖片，前端直接可以轉化為base64然后下載

直接上實例代碼吧，應該都看得懂，我就不多說了，

代碼來自張鑫旭的關於下載的博文，可以直接查看

function download (domImg, filename) {
  // 創建隱藏的可下載鏈接
  let eleLink = document.createElement('a');
  eleLink.download = filename;
  eleLink.style.display = 'none';
  // 圖片轉base64地址
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  let width = domImg.naturalWidth;
  let height = domImg.naturalHeight;
  context.drawImage(domImg, 0, 0);
  // 如果是PNG圖片，則canvas.toDataURL('image/png')
  eleLink.href = canvas.toDataURL('image/jpeg');
  // 觸發點擊
  document.body.appendChild(eleLink);
  eleLink.click();
  // 然后移除
  document.body.removeChild(eleLink);
};

 3：通過formData標簽的方式下載，這是平安易建產品所使用的下載方式，兼容低版本瀏覽器

直接上代碼，因為涉及到加簽驗簽和平安的實際業務，所以看不懂就不用看了，直接上代碼，用於自己以后參考

function downfile(file) {
  if (file == undefined || file == null) {
    return;
  }
  const nonce = Math.floor(Math.random() * (Math.floor(100) - Math.ceil(1))) + Math.ceil(1);
  const timestamp = parseInt(Date.now() / 1000);
  const searchParams = {
    storageKey: file.storageKey, // 文件系統文件key
    tokenType: 2, // 申請token的類型，1：上傳，2：下載，5：預覽
    nonce,
    timestamp,
    alg: 'MD5',
  };
  axios({ url: '/docs/api/file/token/applyToken', method: 'get', params: searchParams })
    .then(res => {
      if (!res.status === 200 || !res.data) {
        return;
      } if (!res.data.success) {
        const msg = res.data.msg && res.data.msg.length > 0 ? res.data.msg : '下載失敗！';
        message.error(msg);

      } else {
        res = res.data || {};
        let content = {};
        if (res.data.contentList && res.data.contentList.length > 0) {
          content = res.data.contentList[0];
        }
        return {
          nodeUrl: content.nodeUrl,
          token: content.token
        }
      }
    }).then(({ nodeUrl, token }) => {
      const url = `${nodeUrl}/node/download/view/${file.storageKey}`; // 文件下載路徑
      const form = document.createElement('form');
      form.setAttribute("method", "get");
      form.setAttribute("name", "theForm");
      form.setAttribute("target", "_self");
      form.setAttribute('style', 'display:none');
      form.setAttribute("action", url);
      document.body.appendChild(form);

      const newinput_fileToken = document.createElement('input');
      newinput_fileToken.setAttribute('type', 'hidden');
      newinput_fileToken.setAttribute('name', 'fileToken');
      newinput_fileToken.setAttribute('value', token)

      const newinput_fileName = document.createElement('input');
      newinput_fileName.setAttribute('type', 'hidden');
      newinput_fileName.setAttribute('name', 'fileName');
      newinput_fileName.setAttribute('value', file.name)

      form.appendChild(newinput_fileToken);
      form.appendChild(newinput_fileName);

      form.submit();
      document.theForm.parentNode.removeChild(form);
    });
}

另附折疊版的批量下載，實際上差不多一樣，如果以后實際項目中遇到，可以綜合在一起

function batchDownfile(files, useType) {
  if(files == undefined || files == null || files.length == 0){
    return;
  }
  let applyTokenForms = [];
  const hasDoc = files.some(file => file.type == 1)
  if(hasDoc){
    applyTokenForms = files.map(it => ({
      fileId: it.id
    }))
  } else {
    applyTokenForms = files.map(it => ({
      storageKey: it.storageKey,
      fileName: it.name
    }))
  }
  const param = hasDoc ? {
    useType: 11
  } : {}
  if(useType){
    param.useType = useType
  }
  const nonce = Math.floor(Math.random()*(Math.floor(100)-Math.ceil(1)))+Math.ceil(1);
  const timestamp = parseInt(Date.now()/1000);
  const searchParams = {
    ...param,
    applyTokenForms,
    tokenType: 4, // 申請token的類型，1：上傳，2：下載，4, 批量下載, 5：預覽
    nonce,
    timestamp,
    alg:'MD5',
  }; 
  const newParam =  setParamSign(JSON.parse(JSON.stringify(searchParams)));
  axios.post(`/docs/api/file/token/applyTokens`,parse(newParam))
    .then(res => {
      if (!res.status === 200 || !res.data){ 
        return; 
      }if(!res.data.success){
        const msg = res.data.msg && res.data.msg.length > 0 ? res.data.msg : '下載失敗！';
        message.error(msg);  
              
      }else{
        res = res.data || {};
        let fileList = [];
        let nodeUrl = '';
        let zipName = '';
        if(res.data && res.data.length > 0){
          fileList = res.data.map(it => {
            let file = {};
            if(it.contentList && it.contentList.length > 0){
              if(zipName == ''){
                zipName = `${files.length > 1 ? `${files[0].name  }等` : (files.length == 1 ? files[0].name : '未知')  }.zip`
              }
              const firstContent = it.contentList[0];
              file = {
                fileId: firstContent.fileId,
                fileName: firstContent.filePath,
                token: firstContent.token
              }
              if(nodeUrl == ''){
                nodeUrl = firstContent.nodeUrl
              }
            }
            return file;
          })
        }
        return {
          fileList,
          nodeUrl,
          zipName
        }
      }
    }).then(({fileList, nodeUrl, zipName}) => {
      const url = `${nodeUrl  }/node/zip/json`; // 文件下載路徑
      const form = document.createElement('form');
      form.setAttribute("method", "post"); 
      form.setAttribute("name", "theForm");
      form.setAttribute("target", "_self");
      form.setAttribute('style', 'display:none');
      form.setAttribute("action", url); 
      document.body.appendChild(form);

      const newinput = document.createElement('input');
      newinput.setAttribute('type','hidden');
      newinput.setAttribute('name','strFileList');
      newinput.setAttribute('value',JSON.stringify(fileList))

      const newinput2 = document.createElement('input');
      newinput2.setAttribute('type','hidden');
      newinput2.setAttribute('name','zipName');
      newinput2.setAttribute('value', zipName)

      form.appendChild(newinput);
      form.appendChild(newinput2);
      form.submit();
      document.theForm.parentNode.removeChild(form);
    });
}

 

暫時結束，以后補充，還可以采用FormData對象實現下載，和$('Form')差不多，這里就不一一列舉了