JS常用的公共方法

1.获取当前年月日

javascript 复制代码

// 获取当前年月日
export function getNowFormatDate(interval = "/") {
  let date = new Date(),
    year = date.getFullYear(), //获取完整的年份(4位)
    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
    strDate = date.getDate(); // 获取当前日(1-31)
  if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
  if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0

  return `${year}${interval}${month}${interval}${strDate}`;
}

2.获取当前时分秒

javascript 复制代码

// 获取当前时分秒
const formatV = (val) => {
  if (val < 10) return "0" + val;
  return val;
};
export function getLocalTime() {
  var date = new Date();
  // var Y = date.getFullYear() + '-'
  // var M = formatV(date.getMonth() + 1) + '-'
  // var D = formatV(date.getDate()) + ' '
  var h = formatV(date.getHours()) + ":";
  var m = formatV(date.getMinutes()) + ":";
  var s = formatV(date.getSeconds());
  return h + m + s;
}

3.获取当前星期

javascript 复制代码

// 获取当前星期
export function getWeekDay() {
  const WeekDays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  return WeekDays[new Date().getDay()];
}

4.获取本月第一天日期

javascript 复制代码

// 获取本月第一天日期
export function getMonthFirst() {
  const currentDate = new Date();
  const year = currentDate.getFullYear(); //获取当前年
  const month = String(currentDate.getMonth() + 1).padStart(2, "0"); //获取当前月
  const firstDay = "01"; //日
  return `${year}-${month}-${firstDay}`;
}

5.获取本月最后一天日期

javascript 复制代码

// 获取本月最后一天日期
export function getMonthLast() {
  // 获取当前日期
  const currentDate = new Date();

  // 获取当前年份
  let year = currentDate.getFullYear();

  // 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
  let month = String(currentDate.getMonth() + 2).padStart(2, "0");

  // 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
  if (month === "13") {
    year = year + 1;
    month = "01";
  }

  // 设置每个月的第一天为 '01'
  let firstDay = "01";

  // 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
  const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;

  // 计算当前月的最后一天，通过减去一天的毫秒数来得到
  const lastDayOfMonth = new Date(
    new Date(firstDayOfNextMonth).getTime() - 86400000
  );

  // 将最后一天的日期转换为 ISO 格式，并提取日期部分
  return lastDayOfMonth.toISOString().split("T")[0];
}

6.获取本年第一天日期

javascript 复制代码

// 获取本年第一天日期
export function getYearFirst() {
  var date = new Date();
  var year = date.getFullYear();
  return year + "-" + "01" + "-" + "01";
}

7.获取本年最后一天日期

javascript 复制代码

// 获取本年最后一天日期
export function getYearLast() {
  // 获取当前年份
  const thisYear = new Date().getFullYear();

  // 创建下一年的第一天
  const nextYearFirstDay = new Date(thisYear + 1, 0, 1); // 注意：月份是从0开始的，0代表1月

  // 减去一天得到今年的最后一天
  const thisYearLastDay = new Date(nextYearFirstDay - 1);

  // 获取年月日
  const year = thisYearLastDay.getFullYear();
  const month = String(thisYearLastDay.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要加1
  const date = String(thisYearLastDay.getDate()).padStart(2, "0");

  // 组合成 YYYY-MM-DD 格式
  const formattedDate = `${year}-${month}-${date}`;
  return formattedDate;
}

8.时间戳转年月日

javascript 复制代码

// 时间戳转年月日
export function formatDate(value) {
  if (typeof value == "undefined") {
    return "";
  } else {
    let date = new Date(parseInt(value));
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    // let h = date.getHours();
    // h = h < 10 ? "0" + h : h;
    // let m = date.getMinutes();
    // m = m < 10 ? "0" + m : m;
    // let s = date.getSeconds();
    // s = s < 10 ? "0" + s : s;
    return y + "-" + MM + "-" + d;
  }
}

9.前端导出csv文件

javascript 复制代码

// 前端导出csv文件
export function exportCsv(columns, dataList, fileName) {
  let title = columns.map(item => item.title);
  let keyArray = columns.map(item => item.key);
  let str = [];
  str.push(title.join(',') + '\n');
  for (let i = 0; i < dataList.length; i++) {
    const temp = [];
    for (let j = 0; j < keyArray.length; j++) {
      temp.push(dataList[i][keyArray[j]]);
    }
    str.push(temp.join(',') + '\n');
  } 
  console.log(str)
  let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(''));
  let downloadLink = document.createElement('a');
  downloadLink.href = uri;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

10.前端导出xml文件

javascript 复制代码

// 前端导出xml文件
export function exportXml(columns, dataList, fileName) {
  let str = '<?xml version="1.0" encoding="utf-8" ?>\n<dataSource>\n';
  dataList.forEach(dataItem => {
    str += `<dataItem>\n`;
    columns.forEach(columnsItem => {
      str += `<${columnsItem.key}>${dataItem[columnsItem.key]}</${columnsItem.key}>\n`;
    });
    str += `</dataItem>\n`;
  });
  str += '</dataSource>';
  let downloadLink = document.createElement('a');
  let uri = window.URL.createObjectURL(new Blob([str], { type: 'text/plain;charset=utf-8,\ufeff' }));
  downloadLink.href = uri;
  downloadLink.download = `${fileName}.xml`;
  downloadLink.click();
  window.URL.revokeObjectURL(uri);
}

11.前端导出html文件

javascript 复制代码

// 前端导出html文件
export function exportHtml(columns, dataList, fileName) {
  let str = '<table border="1" style="border-collapse: collapse;min-width:80%;margin:0 10%;">\n';
  columns.forEach(columnsItem => {
    str += `<th>${columnsItem.title}</th>\n`;
  });
  dataList.forEach(dataItem => {
    str += `<tr>\n`;
    columns.forEach(columnsItem => {
      str += `<td>${dataItem[columnsItem.key]}</td>\n`;
    });
    str += `</tr>\n`;
  });
  str += '</table>';
  let html = `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h2 style="text-align:center">
        ${fileName}
      </h2>
      <div style="width:100%">
        ${str}
      </div>
    </body>
    </html>`;
 
  let downloadLink = document.createElement('a');
  let uri = window.URL.createObjectURL(new Blob([html], { type: 'text/html;charset=utf-8,\ufeff' }));
  downloadLink.href = uri;
  downloadLink.download = `${fileName}.html`;
  downloadLink.click();
  window.URL.revokeObjectURL(uri);
}

12.前端导出pdf文件

javascript 复制代码

// 前端导出pdf文件
export function exportPDF(columns, dataList, fileName) {
  let str = '<table border="1" style="border-collapse: collapse;min-width:80%;margin:0 10%;">\n';
  columns.forEach(columnsItem => {
    str += `<th>${columnsItem.title}</th>\n`;
  });
  dataList.forEach(dataItem => {
    str += `<tr>\n`;
    columns.forEach(columnsItem => {
      str += `<td>${dataItem[columnsItem.key]}</td>\n`;
    });
    str += `</tr>\n`;
  });
  str += '</table>';
  let ele = document.createElement('div');
  ele.innerHTML = `<h2 style="text-align:center">
    ${fileName}
  </h2>
  <div style="width:100%">
    ${str}
  </div>`;
  document.body.appendChild(ele);
 
  // var w = ele.offsetwidth; //获得该容器的宽
  // var h = ele.offsetwidth; //获得该容器的高
  // var offsetTop = ele.offsetTop + 24; //获得该容器到文档顶部的距离
  // var offsetLeft = ele.offsetLeft + 24; //获得该容器到文档最左的距离
  var w = 960; //获得该容器的宽
  var h = 1024; //获得该容器的高
  var offsetTop = 24; //获得该容器到文档顶部的距离
  var offsetLeft = 24; //获得该容器到文档最左的距离
 
  var canvas = document.createElement('canvas');
  var abs = 0;
  var win_i = document.body.clientwidth; //获得当前可视窗口的宽度（不包含滚动条)
  var win_o = window.innerwidth; //获得当前窗口的宽度（包含滚动条)
  if (win_o > win_i) {
    abs = (win_o - win_i) / 2; //获得滚动条长度的---半
  }
  canvas.width = w * 2; //将回布宽&&高放大两倍
  canvas.height = h * 2;
  var context = canvas.getContext('2d');
  context.scale(2, 2);
  context.translate(-offsetLeft - abs, -offsetTop);
  //这里默认横向没有滚动条的情况，因为offset.Left(),有无滚动条的时候存在差值，因此 transLate的时候，要把这个差值去掉
  html2canvas(ele, {
    allowTaint: true,
    scale: 2, //提升画面质量，但是会增加文件大小
  }).then(function(canvas) {
    var contentwidth = canvas.width;
    var contentHeight = canvas.height;
    //一页pdf显示htmL页面生成的canvas高度;
    var pageHeight = (contentwidth / 592.28) * 841.89;
    //未生成pdf 的htmL页面高度
    var leftHeight = contentHeight;
    //页面偏移
    var position = 0;
    //a4纸的尺寸[ 595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgwidth = 595.28;
    var imgHeight = (592.28 / contentwidth) * contentHeight;
    var pageData = canvas.toDataURL(' image/jpeg ', 1.0);
    var pdf = new jsPDF('', 'pt', 'a4');
    console.log(pdf);
    //有两个高度需要区分，一个是htmL页面的实际高度，和生成pdf的页面高度(841.89) 当内容未超过pdf---页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgwidth, imgHeight);
    } else {
      //分页
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgwidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        //避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    pdf.save(`${fileName}.pdf`);
    document.body.removeChild(ele);
  });
}
const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

13.树状结构过滤掉某个属性值

javascript 复制代码

//arr 数组 ， value :过滤掉的值
export function recursivefilter(arr, value) {
	return arr.filter(item => {
		if (item.type === value) {
			return false
		}
		if(item.children && item.children.length > 0){
			item.children = recursivefilter(item.children , value)
		}
		return true
	})
}