乐趣区

关于前端:前端导出

jiezi

对于表格或者文件的导出前端所能做的解决个别分为两种状况：

  1. 一是后端返回文件门路的模式，前端间接下载
  2. 一是后端返回文件流的模式

第一种状况须要文件服务器，前端去文件服务器去下载，这种不做探讨。
本文侧重于第二种状况：后端返回文件流的模式：
解决办法 1：
申请头解决 application/vnd.ms-excel


export async function getTeamBillDetail(params) {
  // 团队对账单 - 明细
  return request(`/wms/bill/getTeamBillDetail`, {
    method: 'POST',
headers: {'Content-Type': 'application/vnd.ms-excel'},
  responseType:'blob',
    data: params,
  });
}

应用

let res = await exportTeamBill(exportData);
             
              const excel = 'application/vnd.ms-excel'
              const blob = new Blob([res], {type: excel})
              const objectUrl = URL.createObjectURL(blob)
              const btn = document.createElement('a') // 转换实现，创立一个 a 标签用于下载
              // btn.download = "a.excel"
              const name = res.headers['content-disposition']
              btn.download = name.split('=')[1]
              btn.href = objectUrl
              btn.click()
              URL.revokeObjectURL(objectUrl)
              btn = null

或者

     // 下载解决逻辑
               const filename = res.headers["content-disposition"];
             const blob = new Blob([res.data]);
             var downloadElement = document.createElement("a");
            // URL.createObjectURL()办法会依据传入的参数创立一个指向该参数对象的 URL. 这个 URL 的生命仅存在于它被创立的这个文档里. 新的对象 URL 指向执行的 File 对象或者是 Blob 对象.
               var href = window.URL.createObjectURL(blob);
              downloadElement.href = href;
              downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
              document.body.appendChild(downloadElement);
              downloadElement.click();
              document.body.removeChild(downloadElement);
              // URL.revokeObjectURL()办法会开释一个通过 URL.createObjectURL()创立的对象 URL. 当你要曾经用过了这个对象 URL, 而后要让浏览器晓得这个 URL 曾经不再须要指向对应的文件的时候, 就须要调用这个办法.
             window.URL.revokeObjectURL(href);

办法二 后端返回 application/msword

  • 前端对于 content-type 还用 application/json

  • 然而后端的返回的响应头 response header 中要有这两个

    封装专用的工具函数 excelDownload

    function download(blobData, forDownLoadFileName) {const aLink = document.createElement('a');
document.body.appendChild(aLink);
aLink.style.display = 'none';
aLink.href = window.URL.createObjectURL(blobData);
aLink.setAttribute('download', forDownLoadFileName);
aLink.click();
document.body.removeChild(aLink);
}

export async function excelDownload(url, options = {}) {const keys = getSecretToken();
options.headers = {
  ...keys,
  'content-type': 'application/json',
};
const response = await fetch(url, options);
const forDownLoadFileName = response.headers.get('content-disposition').split('=')[1];
const blobData = await response.blob();
await download(blobData, decodeURIComponent(forDownLoadFileName));
return forDownLoadFileName;
}

应用 前端间接调接口函数

export async function exportTeamBill(params) {
  return excelDownload(`/wms/bill/exportTeamBill`, {
    method: 'POST',
    data: JSON.stringify(params),
  });
}

最初奉上 getSecretToken 函数以及 MD5 的封装

export const getSecretToken = () => {
  const token = localStorage.token; // 从 user model 里取出 token
  const secret = localStorage.secret; // 从 user model 里取出 token
  let code = '';
  code += token;
  code += secret;
  let midSign = MD5.md5(code.split('').sort().join(''));
  const nonce = new Date().getTime();
  midSign += nonce;
  const signature = MD5.md5(midSign.split('').sort().join(''));
  return {
    managerToken: token,
    managerSecret: secret,
    signature,
    nonce,
  };
};
/* eslint-disable */
function md5(string) {let x = Array();
  let k;
  let AA;
  let BB;
  let CC;
  let DD;
  let a;
  let b;
  let c;
  let d;
  const S11 = 7;
  const S12 = 12;
  const S13 = 17;
  const S14 = 22;
  const S21 = 5;
  const S22 = 9;
  const S23 = 14;
  const S24 = 20;
  const S31 = 4;
  const S32 = 11;
  const S33 = 16;
  const S34 = 23;
  const S41 = 6;
  const S42 = 10;
  const S43 = 15;
  const S44 = 21;
  str = Utf8Encode(string);
  x = ConvertToWordArray(str);
  a = 0x67452301;
  b = 0xefcdab89;
  c = 0x98badcfe;
  d = 0x10325476;
  for (k = 0; k < x.length; k += 16) {
    AA = a;
    BB = b;
    CC = c;
    DD = d;
    a = FF(a, b, c, d, x[k + 0], S11, 0xd76aa478);
    d = FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756);
    c = FF(c, d, a, b, x[k + 2], S13, 0x242070db);
    b = FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee);
    a = FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf);
    d = FF(d, a, b, c, x[k + 5], S12, 0x4787c62a);
    c = FF(c, d, a, b, x[k + 6], S13, 0xa8304613);
    b = FF(b, c, d, a, x[k + 7], S14, 0xfd469501);
    a = FF(a, b, c, d, x[k + 8], S11, 0x698098d8);
    d = FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af);
    c = FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1);
    b = FF(b, c, d, a, x[k + 11], S14, 0x895cd7be);
    a = FF(a, b, c, d, x[k + 12], S11, 0x6b901122);
    d = FF(d, a, b, c, x[k + 13], S12, 0xfd987193);
    c = FF(c, d, a, b, x[k + 14], S13, 0xa679438e);
    b = FF(b, c, d, a, x[k + 15], S14, 0x49b40821);
    a = GG(a, b, c, d, x[k + 1], S21, 0xf61e2562);
    d = GG(d, a, b, c, x[k + 6], S22, 0xc040b340);
    c = GG(c, d, a, b, x[k + 11], S23, 0x265e5a51);
    b = GG(b, c, d, a, x[k + 0], S24, 0xe9b6c7aa);
    a = GG(a, b, c, d, x[k + 5], S21, 0xd62f105d);
    d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);
    c = GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681);
    b = GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8);
    a = GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6);
    d = GG(d, a, b, c, x[k + 14], S22, 0xc33707d6);
    c = GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87);
    b = GG(b, c, d, a, x[k + 8], S24, 0x455a14ed);
    a = GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905);
    d = GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8);
    c = GG(c, d, a, b, x[k + 7], S23, 0x676f02d9);
    b = GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a);
    a = HH(a, b, c, d, x[k + 5], S31, 0xfffa3942);
    d = HH(d, a, b, c, x[k + 8], S32, 0x8771f681);
    c = HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122);
    b = HH(b, c, d, a, x[k + 14], S34, 0xfde5380c);
    a = HH(a, b, c, d, x[k + 1], S31, 0xa4beea44);
    d = HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9);
    c = HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60);
    b = HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70);
    a = HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6);
    d = HH(d, a, b, c, x[k + 0], S32, 0xeaa127fa);
    c = HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085);
    b = HH(b, c, d, a, x[k + 6], S34, 0x4881d05);
    a = HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039);
    d = HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5);
    c = HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8);
    b = HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665);
    a = II(a, b, c, d, x[k + 0], S41, 0xf4292244);
    d = II(d, a, b, c, x[k + 7], S42, 0x432aff97);
    c = II(c, d, a, b, x[k + 14], S43, 0xab9423a7);
    b = II(b, c, d, a, x[k + 5], S44, 0xfc93a039);
    a = II(a, b, c, d, x[k + 12], S41, 0x655b59c3);
    d = II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92);
    c = II(c, d, a, b, x[k + 10], S43, 0xffeff47d);
    b = II(b, c, d, a, x[k + 1], S44, 0x85845dd1);
    a = II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f);
    d = II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0);
    c = II(c, d, a, b, x[k + 6], S43, 0xa3014314);
    b = II(b, c, d, a, x[k + 13], S44, 0x4e0811a1);
    a = II(a, b, c, d, x[k + 4], S41, 0xf7537e82);
    d = II(d, a, b, c, x[k + 11], S42, 0xbd3af235);
    c = II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb);
    b = II(b, c, d, a, x[k + 9], S44, 0xeb86d391);
    a = AddUnsigned(a, AA);
    b = AddUnsigned(b, BB);
    c = AddUnsigned(c, CC);
    d = AddUnsigned(d, DD);
  }
  const temp = WordToHex(a) + WordToHex(b) + WordToHex(c) + WordToHex(d);
  return temp.toUpperCase();}

function RotateLeft(lValue, iShiftBits) {return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
}

function AddUnsigned(lX, lY) {
  const lX4 = lX & 0x40000000;
  const lY4 = lY & 0x40000000;
  const lX8 = lX & 0x80000000;
  const lY8 = lY & 0x80000000;
  const lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);
  if (lX4 & lY4) {return lResult ^ 0x80000000 ^ lX8 ^ lY8;}
  if (lX4 | lY4) {if (lResult & 0x40000000) {return lResult ^ 0xc0000000 ^ lX8 ^ lY8;}
    return lResult ^ 0x40000000 ^ lX8 ^ lY8;
  }
  return lResult ^ lX8 ^ lY8;
}

function F(x, y, z) {return (x & y) | (~x & z);
}

function G(x, y, z) {return (x & z) | (y & ~z);
}

function H(x, y, z) {return x ^ y ^ z;}

function I(x, y, z) {return y ^ (x | ~z);
}

function FF(a, b, c, d, x, s, ac) {a1 = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
  return AddUnsigned(RotateLeft(a1, s), b);
}

function GG(a, b, c, d, x, s, ac) {a1 = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
  return AddUnsigned(RotateLeft(a1, s), b);
}

function HH(a, b, c, d, x, s, ac) {a1 = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
  return AddUnsigned(RotateLeft(a1, s), b);
}

function II(a, b, c, d, x, s, ac) {a1 = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
  return AddUnsigned(RotateLeft(a1, s), b);
}

function ConvertToWordArray(string) {
  let lWordCount;
  const lMessageLength = string.length;
  const lNumberOfWords_temp1 = lMessageLength + 8;
  const lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
  const lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
  const lWordArray = Array(lNumberOfWords - 1);
  let lBytePosition = 0;
  let lByteCount = 0;
  while (lByteCount < lMessageLength) {lWordCount = (lByteCount - (lByteCount % 4)) / 4;
    lBytePosition = (lByteCount % 4) * 8;
    // eslint-disable-next-line operator-assignment
    lWordArray[lWordCount] =
      lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition);
    lByteCount += 1;
  }
  lWordCount = (lByteCount - (lByteCount % 4)) / 4;
  lBytePosition = (lByteCount % 4) * 8;
  // eslint-disable-next-line operator-assignment
  lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
  lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
  lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
  return lWordArray;
}

function WordToHex(lValue) {
  let WordToHexValue = '';
  let WordToHexValue_temp = '';
  let lByte;
  let lCount;
  for (lCount = 0; lCount <= 3; lCount += 1) {lByte = (lValue >>> (lCount * 8)) & 255;
    WordToHexValue_temp = `0${lByte.toString(16)}`;
    WordToHexValue = `${WordToHexValue}${WordToHexValue_temp.substr(
      WordToHexValue_temp.length - 2,
      2,
    )}`;
  }
  return WordToHexValue;
}

function Utf8Encode(string) {
  let utftext = '';
  for (let n = 0; n < string.length; n += 1) {const c = string.charCodeAt(n);
    if (c < 128) {utftext += String.fromCharCode(c);
    } else if (c > 127 && c < 2048) {utftext += String.fromCharCode((c >> 6) | 192);
      utftext += String.fromCharCode((c & 63) | 128);
    } else {utftext += String.fromCharCode((c >> 12) | 224);
      utftext += String.fromCharCode(((c >> 6) & 63) | 128);
      utftext += String.fromCharCode((c & 63) | 128);
    }
  }
  return utftext;
}
module.exports = {md5,};
退出移动版