js库总结

js库总结

“html2canvas”: “^1.4.1”,//jspdf和html2canvas导出pdf文件
“jspdf”: “^2.5.1”,//jspdf和html2canvas导出pdf文件
“html-to-image”: “^1.6.2”, //将dom节点下载成png图片
“moment”: “^2.29.1”, // 时间格式化处理
“node-scp”: “^0.0.22”, // 局域网内使用scp命令复制文件（支持账号密码）
“node-xlsx”: “^0.21.0”,//使用nodejs读取xlsx文件内容
“nprogress”: “^0.2.0”,//页面顶部的进度条
“papaparse”: “^5.3.0”,//导出csv文件
“vue-i18n”: “^9.2.0-beta.13”, //语言转换翻译
“vue3-contextmenu”: “^0.2.12”, //右键菜单 vue-contextmenujs的使用
“vue-count-to”: “1.0.13”,//自动判断加计数或减计数

---

html2canvas

jspdf和html2canvas导出pdf文件

jspdf

jspdf和html2canvas导出pdf文件

html-to-image

将dom节点下载成png图片

import * as htmlToImage from 'html-to-image';

    const downloadImage = () => {
		//需要获取document对象
      htmlToImage.toBlob(document.getElementById('lineChart') as any).then((blob: any) => {
        window.saveAs(blob, '序列Q值.png');
      });
    }

moment

时间格式化处理

'use strict'
let moment = require('moment');
//获取当前时间
var now = moment().toDate();//Mon Jul 06 2020 13:50:51 GMT+0800 (中国标准时间)
console.log(now)
 
//格式化当前时间
now = moment().format('YYYY-MM-DD');//2020-07-06
console.log(now);
 
//其它几种格式化方法
now = moment().format('L') // 10/22/2016 
console.log(now);
 
now = moment().format('LL') // October 22, 2016
console.log(now);
 
//格式化当前时间
now = moment().format('YYYY-MM-DD:HH:MM:SS');
console.log(now);
 
//获取这个月初时间
let startMonth = moment().startOf('month').toDate();
console.log(startMonth);
 
//获取今天开始的时间
let dayOfStart = moment().startOf('day').toDate();
console.log(dayOfStart);
 
//获取今天结束的时间
let dayOfEnd = moment().endOf('day').toDate();
console.log(dayOfEnd);
 
 
//获取＋n小时
let lateHour = moment().add(2,'hour').toDate();
console.log(lateHour);
 
//获取＋n小时
console.log('//获取-n小时')
let beforeHour = moment().subtract(2,'hour').toDate();
console.log(beforeHour);
 
 
//获取＋n天
let lateDay = moment().add(+5,'day').toDate();
console.log(lateDay);
 
//获取-n天
let beforeDay = moment().add(-5,'day').toDate();
console.log(beforeDay);
//也可以表示为
beforeDay = moment().subtract(5,'day').toDate();
console.log(beforeDay);
 
console.log('//获取＋n月')
let lateMonth = moment().add(2,'month').toDate();
console.log(lateHour);
 
//获取＋n月
let beforeMonth = moment().subtract(2,'month').toDate();
console.log(lateHour);
 
 
 
//获取星期
let week = moment().format('dddd');
console.log(week);
 
//获取到现在的年限 如果不满一年显示出具体几个月
let years = moment('2020-12-31').fromNow();
console.log(years);

node-scp

局域网内使用scp命令复制文件（支持账号密码）
官网：https://www.npmjs.com/package/node-scp 点击去官网

const { Client } = require('node-scp')

	let  p.host = 192.168.1.121;
	let p.username = 'root';
	let p.password= '123456';


    Client({
      host: p.host, //需要连接的电脑的ip地址
      port: 22,
      username: p.username,//需要连接的电脑的账号
      password: p.password,//需要连接的电脑的密码
    }).then((client) => {
      console.log('suc');
      clientIntance = client
      event.sender.send('npdeScpConnectSuc', 'suc');

      if (p.type == 'uploadFile') {

        // 上传文件
        client.uploadFile(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpUploadFile', 'suc');

        }).catch((error) => {
          message.error('上传失败')
          event.sender.send('npdeScpUploadFile', 'fail');
        })

      } else if (p.type == 'uploadDir') {

        // 上传文件夹
        client.uploadDir(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpUploadDir', 'suc');

        }).catch((error) => {
          message.error('上传失败')
          event.sender.send('npdeScpUploadDir', 'fail');
        })

      } else if (p.type == 'downloadFile') {

        // 下载文件
        client.downloadFile(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpDownloadFile', 'suc');

        }).catch((error) => {
          message.error('下载失败')
          event.sender.send('npdeScpDownloadFile', 'fail');
        })


      } else if (p.type == 'downloadDir') {

        // 下载文件夹
        client.downloadDir(
          p.localPath,//本地文件路径
          p.serverPath, //远端要上传的位置路径（注意后面要拼接上要上传文件的名字）
        ).then((response) => {
          client.close() // remember to close connection after you finish
          event.sender.send('npdeScpDownloadDir', 'suc');

        }).catch((error) => {
          message.error('下载失败')
          event.sender.send('npdeScpDownloadDir', 'fail');
        })

      }

    }).catch((e) => {
      console.log('连接失败');
      event.sender.send('npdeScpConnectSuc', 'fail');

    })

node-xlsx

使用nodejs读取xlsx文件内容

//引入
let xlsx = require('node-xlsx');

//读取
let sheets = xlsx.parse(‘文件所在绝对路径’);//获取到所有sheets

// sheets 是个数组，里面是所有表，拿到的如下图所示，拿到数据后面，怎么处理就好说了

nprogress

页面顶部的进度条
import NProgress from “nprogress”; // 导入 nprogress模块
import “nprogress/nprogress.css”; // 导入样式，否则看不到效果（或者在main.ts里面引入）
NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示 papaparse
NProgress.start(); //开启进度条
NProgress.done(); //完成进度条

//继续，在下面声明完router(const router = new VueRouter({......}))后面写上路由钩子函数如下所示。

router.beforeEach((to, from, next) => {

NProgress.start(); //开启进度条

//中间写其他的项目中所需要的一些代码，例如有些网页只有登录了才能进，在这里可以做出判断，判断完了满足要求后就可以放行 next()

next();

});

router.afterEach(() => {

NProgress.done(); //完成进度条

});

//这个呢，基本上会这几个api就足够了，我们用的最多的就是这几个，NProgress.start()开启进度条，NProgress.done()完成进度条，如果我们想改变进度条的颜色，可以进入App.vue里，在style中加上下面这样几行代码即可。

#nprogress .bar {

  background: blue !important;    //这里可以随便写颜色

}

导出csv文件

vue-i18n

语言转换翻译
参考大佬的博客

vue3-contextmenu

右键菜单 vue-contextmenujs的使用

vue-count-to

vue-countTo 是一个无依赖的轻量级 vue 组件，可以自己覆盖 easingFn。可以设置 startVal 和 endVal ，它会自动判断加计数或减计数。

<template>
  <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },

}
</script>

<style lang="scss" scoped></style>