平常工作用到的插件

日常用的插件

lodash：一些常用的API库

官网地址：https://www.lodashjs.com/
里面把一些常见的API实现好了，只要套用一下就可以

---

moment：时间API库

官网地址：https://momentjs.com/#donate
里面是一些跟时间戳有关API，没必要自己写一些时间戳的API了

---

xlsx：解析xlsx文件

npm地址：https://www.npmjs.com/package/xlsx/v/0.17.0
这个是用来解析xlsx文件内容的一个库

import React, { useState } from 'react';
import { read, utils } from 'xlsx';

export default () => {
	const [fileDate, setFileDate] = useState({});

	return (
	  <input
        type="file"
        onChange={(e) => {
          if (e.target.files.length !== 0) {

            const file = e.target.files[0];
            const list = {
              name: file.name, // 文件名
              file, // 整个文件信息
            };
            if (/(.xlsx)$/.test(file.name)) {
              const reader = new FileReader();

              reader.readAsBinaryString(file);
              reader.onload = (res) => {
                let workBook = read(res.target.result, {type: 'binary'})

                list.data = {};
                workBook.SheetNames.forEach(sheetName => {
                  let workSheet = workBook.Sheets[sheetName];

                  list.data[sheetName] = utils.sheet_to_json(workSheet);
                });
                setFileDate(list);
              }
            } else {
              setFileDate(list);
            }
          }
        }}
      />
	)
}

---

file-saver：下载文件到本地

gitHub地址：https://github.com/eligrey/FileSaver.js
下面有些是引用gitHub中写的案例

1. 可以下载文本

import { saveAs } from 'file-saver';

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

2.可以根据图片地址，下载图片

import { saveAs } from 'file-saver';

// 第二个参数名的后缀可以不写，会根据对应图片类型自动生成
saveAs("https://httpbin.org/image", "image.jpg");

3. 可以下载文件

import { saveAs } from 'file-saver';

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

4. 可以根据自己设置的数据下载表格文件

import { saveAs } from 'file-saver';

// 下面两行是假数据，代码中你可以根据你自己的情况修改这些逻辑代码
const head = ['表头a', '表头b'];
const data = [{a: 'a1', b: 'b1'}, {a: 'a2', b: 'b2'}];

const fileHead = `\r,${head.join()},\n,`;
const fileData = data.map(item => {
	// 这个Object.values你要自己把控好生成的顺序，要不然数据顺序不会对应表头
	return `${Object.values(item).map(v => v || '-').join()},\n,`; 
}).join();

const blob = new Blob([decodeURIComponent('%ef%bb%bf') + fileHead + fileData], { type: 'text/csv;charset=utf-8' });
saveAs(blob, `${name}.csv`);

生成的文件打开会变成：

表头a	表头b
a1	b1
a2	b2

---

html2canvas：将dom转成图片

官网地址：https://momentjs.com/#donate

<script src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>

将页面的dom转成图片
东西有点多，就放这里了https://blog.youkuaiyun.com/weixin_44726476/article/details/134990297

---

react中的插件

echarts-for-react：图表组件

官网地址：https://allenchinese.github.io/html2canvas-docs-zh-cn/docs/html2canvas-configuration.html

项目中用到的一种折线图配置

{
	theme: "light",
	option: {
		tooltip: {
  			trigger: 'axis',
  			alwaysShowContent: true, // 如果没有鼠标悬浮提示框的需要，不要加这条
  			enterable: true, // 同上（这三条是一起配置的）
  			position: (point) => point, // 同上
  			formatter(params) {
    			let result = `${params[0].name} </br>`;

    			params.forEach(({
      				marker,
      				seriesName,
      				value,
    			}) => {
      				result += `${marker}
        			${ReactDOMServer.renderToString( // 这里是为了写react的组件进来
          				<span>{`${seriesName} : ${value}${value ? '%' : ''}`}</span>)}
        			</br>`;
    			});

    			return result;
  			},
  			extraCssText: 'z-index: 0',
		},
		legend: {
			data: ['aaa'],
			selectedMode: 'multiple',
			icon: 'circle',
			itemWidth: 10,
			type: 'scroll',
			bottom: 10,
		},
		series: [
			{
				data: [1, 2, 3, 4, 5, 6, 7],
				name: 'aaa',
				Symbol: 'circle',
				type: 'line',
			},
		],
		xAxis: {
			type: 'category',
			data: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
			axisLine: {
				lineStyle: {
					color: '#262626',
				},
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				formatter: (value) => {
					return `${value} %`;
				},
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
				},
				show: true,
			},
			axisTick: {
				show: false,
			},
		},
	},
}

---

react-dnd：拖拽插件​​​​​​​​​​​​​​

官网地址：https://react-dnd.github.io/react-dnd/about
可以拖拽dom到想放的位置，里面有对应的生命周期可以对拖拽事件进行操作

---

react-slick：轮播图插件

官网地址：https://react-slick.neostack.com/
可以快速编辑一个轮播图，和swiper很像

---

@monaco-editor/react：编辑器

感觉这个插件是react-monaco-editor做了一层封装
gitHub地址：https://github.com/suren-atoyan/monaco-react
可以用作 编辑文件、展示文件、文件对比

import React, { Fragment, useState } from 'react';
import Editor, { DiffEditor } from '@monaco-editor/react';
export default () => {
	const [value, setValue] = useState([{ a: 1, b: 2 }]);
	const options = { // 一些常用的配置，其他配置直接去百度 “react-monaco-editor属性配置”
		readOnly: true, // 只读
		fontSize: 12, // 字体大小
		wordWrap: 'wordWrapColumn', // 一行文字超出，是否换行
		wordWrapColumn: 100, // 一行多少字符
		minimap: { // 右侧小地图配置
			enabled: true, // 是否启用小地图的渲染
		},
	};

	return (
		<Fragment>
			<Editor // 单窗口展示
				height={parseInt(window.parent.innerHeight * 0.8, 10)} // 窗口高度，默认为0，我这里是根据浏览器窗口定的值
				language="json" //内容语言，猜测默认是text格式
				value={JSON.stringify(value, null, 4)} // 展示的数据，正常的JSON字符串是不会换行的，会挤成一行
				options={options}
				onChange={setValue} // 内容修改时触发的事件
			/>
			<DiffEditor // 内容对比展示
				height={parseInt(window.parent.innerHeight * 0.8, 10)}
				original={JSON.stringify(value, null, 4)} // 左侧内容
				modified={JSON.stringify(value, null, 4)} // 右侧内容
				options={options}
			/>
		</Fragment>
	)
};

谷歌的插件

SessionBox：可以多个账号登录

下载地址：https://chromewebstore.google.com/detail/sessionbox-multi-login-to/megbklhjamjbcafknkgmokldgolkdfig
启动后，网站右击中就有

---

modheader：可以修改请求头的内容

下载地址：https://chromewebstore.google.com/detail/modheader-modify-http-hea/idgpnmonknjnojddfkpgkljpfnnfcklj?hl=en&pli=1