前端好用的函数小工具（亲测好用）

前端好用的函数小工具（亲测好用）

1. html2canvas工具下载前端页面，保存成pdf文件

import React, { useRef } from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default function index() {
  const printRef = useRef(null);

// 导出PDF (这个函数写在下载按钮上)
  const handlePdfExport = () => {
    const print = printRef.current; // 获取需要打印的内容所在的DOM对象
    const w = print.offsetWidth; // 获得该容器的宽
    const h = print.offsetHeight; // 获得该容器的高
    const body = document.body;
    const html = document.documentElement;
    // const h = Math.max(
    //   body.scrollHeight,
    //   body.offsetHeight,
    //   html.clientHeight,
    //   html.scrollHeight,
    //   html.offsetHeight,
    // );
    const pdf = new jsPDF('p', 'mm', [w, h]); // 创建新的PDF实例

    const offsetTop = print.offsetTop; // 获得该容器到文档顶部的距离
    const offsetLeft = print.offsetLeft; // 获得该容器到文档最左的距离
    const canvas = document.createElement('canvas');
    let abs = 0;
    const win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    const win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
    if (win_o > win_i) {
      abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
    }
    canvas.width = w * 2; // 将画布宽&&高放大两倍
    canvas.height = h * 2;
    const context = canvas.getContext('2d');
    context.scale(2, 2);
    context.translate(-offsetLeft - abs, -offsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉
    html2canvas(print, {
      allowTaint: true,
      scale: 2, // 提升画面质量，但是会增加文件大小
    }).then(function (canvas) {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      const pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      let leftHeight = contentHeight;
      //页面偏移
      let position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28;
      const imgHeight = (592.28 / contentWidth) * contentHeight;

      const pageData = canvas.toDataURL('image/jpeg', 1.0);
      const str = '';
      const pdf = new jsPDF(str, 'pt', 'a4'); //创建新的PDF实例
      const title = '资产直接调配单';

      //有两个高度需要区分，一个是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(`${title}.pdf`);
    });
  };
  return(
  	 <div className={styles.mainContainer} ref={printRef}>
  	 ...
  	 </div>//吧ref绑在需要下载的div上
  )
}

2. 获取当前日期函数

//获取当前日期
  function getNowFormatDate() {
    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
    const dateString = `${year}-${month}-${strDate}`;
    // setApplyDate(dateString);
    // form.setFieldValue('applyDate', dateString);
    return dateString;
  }

3. 给antd表格的日期排序

import moment from 'moment';
//Table的columns中
const columns = [
	 {
          title: '申请日期',
          dataIndex: 'applyDate',
          sorter: true,
          align: 'center',
          // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
          sorter: (a, b) => {
            return new Date(a.parentPlanApprovalDate) >
              new Date(b.parentPlanApprovalDate)
              ? 1
              : -1;
          },
          customRender: function (text) {
            if (text == '' || text == null) {
              return '/';
            } else {
              return moment(text).format('YYYY-MM-DD');
            }
          },
        }
]

4. 超过n个字符 / 字段，后边的字用…代替

（1）echarts图表中，以x轴为例

const xAxisLabel = {
  show: true,
  rotate: 15, //倾斜角度
  formatter: function (value) {
    return value.length > 4 ? value.substring(0, 4) + '...' : value;
  }, //字过多使用省略号
};
xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
      offset: 10,
      axisLabel: {
        fontSize: 25,
        lineHeight: 80,
        margin: 10,
        ...xAxisLabel,
      },
      data: data,//数据
    }

（2）规定显示n个字段，超过就…显示

const stringName = "香蕉，苹果，橘子，桃子，栗子，梨子，李子";
//split() 方法用于把一个字符串分割成字符串数组
stringName.split(',').map((item,index)=>{
	// 只展示前4个字段
	 if (index < 4) {
	 	return item;
	 }                    
})
stringName.split(',').length > 4 ? '...' : ' ';
//两个合并可实现成 "香蕉，苹果，橘子，桃子..."