一些常用公共方法

15 篇文章 0 订阅
13 篇文章 0 订阅
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
// 文件流转base64
export const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};

// 时间戳转日期
export const stamp2Date = (timestamp) => {
  let len = String(timestamp).length;
  if (len < 13) {
    timestamp = timestamp * 1000;
  }

  let date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
  let Y = date.getFullYear() + '-';
  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
  let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return Y + M + D; //+h+m+s;
};

// 获取随机ID
export const guid = () => {
  const s4 = () => {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  };
  return s4() + s4();
};
/**
 * @num: 待添加千位分隔符的数字。
 * @return: string 123,456,789
 */
export const thousandFormat = (num) => {
  return (
    num &&
    num.toString().replace(/\d+/, function (s) {
      return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    })
  );
};
// html转pdf
/**
 * @param  ele          要生成 pdf 的DOM元素(容器)
 * @param  padfName     PDF文件生成后的文件名字
 * */

export function downloadPDF(ele, pdfName) {
  window.scrollTo(0, 0);
  let w = ele.clientWidth; //获取屏幕宽度
  let h = ele.clientHeight; //获取屏幕高度
  let scale = 1;
  //一页pdf显示html页面生成的canvas高度;
  let canvas = document.createElement('canvas');
  canvas.width = w * scale;
  canvas.height = h * scale;
  canvas.style.width = w * scale + 'px';
  canvas.style.height = h * scale + 'px';
  canvas.getContext('2d').scale(scale, scale);
  let opt = {
    scale: scale, //添加scale 参数
    canvas: canvas, //自定义canvas
    logging: false,
    width: w, //canvas 宽度
    hieght: h, //canvas 高度
    useCORS: true, //开启跨域
  };

  html2canvas(ele, opt).then((canvas) => {
    var pdf = new JsPDF('p', 'mm', 'a4'); //A4纸,纵向
    var ctx = canvas.getContext('2d'),
      a4w = 190,
      a4h = 274, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
      imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
      renderedHeight = 0;

    while (renderedHeight < canvas.height) {
      var page = document.createElement('canvas');
      page.width = canvas.width;
      page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页 //用getImageData剪裁指定区域,并画到前面创建的canvas对象中

      page
        .getContext('2d')
        .putImageData(
          ctx.getImageData(
            0,
            renderedHeight,
            canvas.width,
            Math.min(imgHeight, canvas.height - renderedHeight),
          ),
          0,
          0,
        );
      pdf.addImage(
        page.toDataURL('image/jpeg', 1.0),
        'JPEG',
        10,
        10,
        a4w,
        Math.min(a4h, (a4w * page.height) / page.width),
      ); //添加图像到页面,保留10mm边距
      renderedHeight += imgHeight;
      if (renderedHeight < canvas.height) {
        pdf.addPage(); //如果后面还有内容,添加一个空页
      }
    }
    //可动态生成
    pdf.save(pdfName);
  });
}

//
// 获取元素距离可视区域顶部、左部的距离
export const getOffset = (ele) => {
  var top = ele.offsetTop;
  var left = ele.offsetLeft;
  while (ele.offsetParent) {
    ele = ele.offsetParent;
    if (window.navigator.userAgent.indexOf('MSTE 8') > -1) {
      top += ele.offsetTop;
      left += ele.offsetLeft;
    } else {
      top += ele.offsetTop + ele.clientTop;
      left += ele.offsetLeft + ele.clientLeft;
    }
  }
  return {
    left: left,
    top: top,
  };
};

// 获取元素距离可视区域顶部、左部的距离
export const getOffset = (ele) => {
  var top = ele.offsetTop;
  var left = ele.offsetLeft;
  while (ele.offsetParent) {
    ele = ele.offsetParent;
    if (window.navigator.userAgent.indexOf('MSTE 8') > -1) {
      top += ele.offsetTop;
      left += ele.offsetLeft;
    } else {
      top += ele.offsetTop + ele.clientTop;
      left += ele.offsetLeft + ele.clientLeft;
    }
  }
  return {
    left: left,
    top: top,
  };
};
//
export const getSize = () => {
  let windowW, windowH, contentH, contentW, scrollT;
  windowH = window.innerHeight;
  windowW = window.innerWidth;
  scrollT = document.documentElement.scrollTop || document.body.scrollTop;
  contentH =
    document.documentElement.scrollHeight > document.body.scrollHeight
      ? document.documentElement.scrollHeight
      : document.body.scrollHeight;
  contentW =
    document.documentElement.scrollWidth > document.body.scrollWidth
      ? document.documentElement.scrollWidth
      : document.body.scrollWidth;
  return { windowW, windowH, contentH, contentW, scrollT };
};

export const getDownload = (path) => `main/file/download?path=${path}`;
// 模拟a标签下载
export const getADownload = (url, name) => {
  let a = document.createElement('a');
  a.download = name;
  a.href = url;
  a.click();
};

// 模拟a标签下载(Blob)
export const getBlobADownload = (data, name) => {
  const url = window.URL.createObjectURL(data);
  getADownload(url, name);
};
//判断文件后缀名
export const FileType = (fileName) => {
  let reg = /.docx|.pdf|.xls|.doc|.txt/;
  return reg.test(fileName);
};
//判断图片后缀名
export const PictureType = (fileName) => {
  let reg = /(?:png|jpg|jpeg|gif|svg)$/;
  return reg.test(fileName);
};

// 获取文件后缀名
export const getSuffix = (fileName) => {
  return fileName.substring(fileName.lastIndexOf('.') + 1);
};

// 获取url参数
export const getHashParam = (queryString, name) => {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
    queryString = queryString.split("?")[1] || "",
    result = queryString.match(reg);
  return result ? decodeURIComponent(result[2]) : null;
};

// 获取url参数
export const getHashParamHref = (name) => {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
    queryString = window.location.hash.split("?")[1] || "",
    result = queryString.match(reg);
  return result ? decodeURIComponent(result[2]) : null;
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值