❤️⭐ 前端都需要知道的开发工具函数,都用得上,建议收藏 ⭐❤️

简介: ❤️⭐ 前端都需要知道的开发工具函数,都用得上,建议收藏 ⭐❤️

这里写目录标题

一、格式化年月日 传法:`tool.parseTime(new Date(), "{y}-{m}")`

二、首字母大小写

三、获取当前月 `适用于elementUI及elementUI plus)`

四、获取上月 `(适用于elementUI及elementUI plus)`

五、获取当前周 `(适用于elementUI及elementUI plus)`

六、当后端传回的数据不是数据流,此时想要导出Excel表格 可以使用这个

七、那既然有后端返回不是数据流的方式 也会有返回数据流的方式,返回数据流相对要简单很多

一、格式化年月日 传法:tool.parseTime(new Date(), "{y}-{m}")

// 日期格式化
tool.parseTime = function (time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time.replace(new RegExp(/-/gm), '/');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

二、首字母大小写

// 首字母大小
tool.titleCase = function (str) {
    return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
}
// 下划转驼峰
tool.camelCase = function (str) {
    return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
}

三、获取当前月 适用于elementUI及elementUI plus)

// 获取月范围Date对像
tool.getMonthDateRange = function (oDate: Date) {
    let year = oDate.getFullYear()
    let month = oDate.getMonth()
    let start, end
    if (month == 0) {
        year--
        start = new Date(year, 0, 1)
        end = new Date(year, 12, 31)
    } else {
        start = new Date(year, month, 1)
        end = new Date(year, month + 1, 0)
    }
    return [start, end]
}

四、获取上月 (适用于elementUI及elementUI plus)

// 获取周范围Date对像
tool.getLastMonthDateRange = function (oDate: Date) {
    let year = oDate.getFullYear()
    let month = oDate.getMonth()
    let start, end
    if (month == 0) {
        year--
        start = new Date(year, 11, 1)
        end = new Date(year, 11, 31)
    } else {
        start = new Date(year, month - 1, 1)
        end = new Date(year, month, 0)
    }
    return [start, end]
}

五、获取当前周 (适用于elementUI及elementUI plus)

// 获取周范围Date对象
tool.getWeekDateRange = function (oDate: Date) {
    const end = cloneDeep(oDate)
    const start = cloneDeep(oDate)
    const nows = start.getDay() || 7 // 周日算第一天,如果周日查询本周的话,天数是0,所有如     果是0,默认设置为7
    const endNows = 0 // 周日算第一天,如果周日查询本周的话,天数是0,所有如     果是0,默认设置为7
    start.setTime(start.getTime() - 3600 * 1000 * 24 * (nows - 1))
    end.setTime(end.getTime() - 3600 * 1000 * 24 * (nows - 7))
    return [start, end]
}

另外如果要在工具函数中使用vueX的数据的话,记得使用await处理异步问题,如:

await store.dispatch("sys/user/set", userInfo)

六、当后端传回的数据不是数据流,此时想要导出Excel表格 可以使用这个

//后端返回的数据是这样的
{
  "code":200,
  "data":{
    "dataList":[
      {
        "mealCount":2,
        "payMoney":1501,
        "subsidyMoney":1501,
        "uid":1,
        "userName":"张三"
      },
      {
        "mealCount":1,
        "payMoney":1,
        "subsidyMoney":1,
        "uid":136,
        "userName":"李四"
      },
      {
        "mealCount":1,
        "payMoney":1,
        "subsidyMoney":1,
        "uid":4,
        "userName":"王五"
      }
    ]
  },
  "msg":"success"
}

那么这是相应的触发事件

async onExportClick() {
        state.exportLoading = true;
        let res = await api.queryMealSubsidyMonth({
          subsidyMonth: subsidyMonth,
        });        
        // 定义表格标题
        let excelTitle = subsidyMonth;
        if (res.code == 200) {
          let tHeader: string[] = [];
          let filterVal: string[] = [];
          let columnList= [
            { colName: "用户ID", colFiled: "uid" },
            { colName: "姓名", colFiled: "userName" },
            { colName: "支付金额", colFiled: "payMoney" },
            { colName: "点餐数量", colFiled: "mealCount" },
            { colName: "补贴金额", colFiled: "subsidyMoney" },
          ],
          columnList.map((colItem: any) => {
            tHeader.push(colItem.colName);
            filterVal.push(colItem.colFiled);
          });
          let dataList: SubsidyItem[] = res.data.dataList;
          // 金额分转化为金额元
          dataList.map((subsidyItem: SubsidyItem) => {
            subsidyItem.payMoney = subsidyItem.payMoney / 100;
            subsidyItem.subsidyMoney = subsidyItem.subsidyMoney / 100;
          });
          const data = util.tool.formatJson(filterVal, dataList);
          let timestamp = new Date().valueOf();
          let fileName = `${excelTitle}的餐补信息`;
          console.log(tHeader, "tHeader");
          console.log(data, "data");
          util.excel.exportJson2Excel(
            tHeader,
            data,
            fileName,
            undefined,
            undefined
          );
          setTimeout(() => {
            state.exportLoading = false;
          }, 500);
        } else {
          ElMessage({
            message: res.data.message,
            type: "error",
            duration: 2 * 1000,
          });
          setTimeout(() => {
            state.exportLoading = false;
          }, 500);
        }
        setTimeout(() => {
          state.exportLoading = false;
        }, 5000);
        console.log("onExportClick");
      },

相应的工具函数:

//处理Excel的行数据 一定要return出去 否则map无法导出
tool.formatJson = function (filterKeys: any, jsonData: any) {
    return jsonData.map((data: any) => filterKeys.map((key: string) => {
        if (key === 'timestamp') {
            return tool.parseTime(data[key])
        } else {
            return data[key]
        }
    }))
}
//导出Excel的主要函数
excel.exportJson2Excel = function (header: string[], data: any, filename = 'excel-list', multiHeader: string[][] = [], merges: any[] = [], autoWidth = true, bookType = 'xlsx') {
  data = [...data]
  data.unshift(header)
  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }
  const wsName = 'SheetJS'
  const wb = new Workbook()
  const ws = sheetFromDataArray(data)
  if (merges.length > 0) {
    if (!ws['!merges']) {
      ws['!merges'] = []
    }
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }
  if (autoWidth) {
    // 设置worksheet每列的最大宽度
    const colWidth = data.map((row: any) => row.map((val: any) => {
      // 先判断是否为 null/undefined
      if (val == null) {
        return {
          wch: 10
        }
        // 再判断是否为中文
      } else if (val.toString().charCodeAt(0) > 255) {
        return {
          wch: val.toString().length * 2
        }
      } else {
        return {
          wch: val.toString().length
        }
      }
    }))
    // 以第一行为初始值
    const result = colWidth[0]
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j].wch < colWidth[i][j].wch) {
          result[j].wch = colWidth[i][j].wch
        }
      }
    }
    ws['!cols'] = result
  }
  // Add worksheet to workbook
  wb.SheetNames.push(wsName)
  wb.Sheets[wsName] = ws
  const wbout = XLSX.write(wb, {
    bookType: bookType as any,
    bookSST: false,
    type: 'binary'
  })
  saveAs(new Blob([s2ab(wbout)], {
    type: 'application/octet-stream'
  }), `${filename}.${bookType}`)
}

七、那既然有后端返回不是数据流的方式 也会有返回数据流的方式,返回数据流相对要简单很多

那么这是相应的触发事件(因为是数据流就没CV后端数据上去)

//导出Excel
async getExcel() {
        let res = await api.exportExcel(state.queryParams.salaryTemplateId)
        if (res.code == 500) {
          return false
        }
        const blob = new Blob([res])
        let link: any = document.createElement("a")
        link.href = URL.createObjectURL(blob)
        link.setAttribute("download", `${state.title}.xlsx`)
        link.click()
        link = null
},


目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
37 0
|
7天前
|
前端开发 JavaScript 开发工具
独家揭秘:前端大牛们都在用的高效开发工具,你get了吗?
前端开发领域日新月异,Visual Studio Code、Webpack、React/Vue和Git等工具凭借高效、便捷的特点,深受前端大牛们青睐。本文将揭秘这些工具的使用技巧,帮助你提升开发效率,轻松应对各种前端挑战。
17 3
|
1月前
|
前端开发 JavaScript
前端:实现一个 sleep 函数
在前端开发中,实现一个 `sleep` 函数可以用来暂停代码执行,模拟延迟效果,常用于测试或控制异步操作的节奏。该函数通常基于 `Promise` 和 `setTimeout` 实现,简单易用。
|
2月前
|
存储 前端开发 JavaScript
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
本文介绍了JavaScript中作用域的概念,包括全局变量和局部变量的区别,预解析机制(变量提升),以及函数返回值的使用和类型。通过具体示例讲解了变量的作用域、函数的返回值、以及如何通过return关键字从函数中返回数据。
23 1
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
|
2月前
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
24 1
|
3月前
|
JSON 前端开发 API
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
|
2月前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
27 6
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
|
4月前
|
开发框架 JSON 前端开发
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
|
4月前
|
JavaScript 前端开发
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
27 0