记一下前端用过的一些依赖

业务

uppy (上传文件)

"@uppy/core": "1.12.2",
"@uppy/locales": "1.16.3",
"@uppy/react": "1.10.2",
"@uppy/tus": "1.7.3",

import React, { Component } from "react";
import Uppy from "@uppy/core";
import Tus from "@uppy/tus";
import $ from "jquery";
import { Dashboard } from "@uppy/react";
import chinaLocale from "@uppy/locales/lib/zh_CN";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import { message, Progress, Skeleton, Tooltip, Modal } from "antd";
import { d3UploadCount } from "@libs/api";
import { sysState } from "@api/statistic";

export default class UploadFiles extends Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: 0,
      percentDisk: "",
    };
    this.uppy = new Uppy({
      meta: {
        data_set_id: this.props.data_set_id || "",
        user_id: 0,
      },
      autoProceed: false,
      locale: chinaLocale,
      onBeforeFileAdded: (currentFile) => {
        return this.onCheckedUpload(currentFile);
      },
      restrictions: {
        maxFileSize: 1024 * 1024 * 1024 * 4,
        maxNumberOfFiles: 1000,
        minNumberOfFiles: 1,
        allowedFileTypes: [
          ".tif",
          ".tiff",
        ],
      },
    })
      .use(Tus, {
        endpoint: window._CONFIG.REACT_APP_UPLOAD_URL,
      })
      .on("file-added", (file) => {
        let d3FolderName = "";
        let d3FolderList = file.data.relativePath.match(/\/.*\/(\S*)\//);
        if (d3FolderList) {
          d3FolderName = d3FolderList[1];
        }
        this.uppy.setFileMeta(file.id, {
          d3_folder_name: d3FolderName,
        });
      })
      .on("complete", (result) => {
        console.log("successful files:", result.successful);
        console.log("failed files:", result.failed);
      });
  }



  componentWillUnmount() {
    this.uppy.close();
  }

  /*判断是否已存在该文件开始*/
  onCheckedUpload(currentFile) {
    let hasUploaded = false;
    let fileName = currentFile.name;
    if (fileName.match(/[\u4e00-\u9fa5]/)) {
      message.info(`${fileName}包含中文字符`, 2);
      return false;
    }
    if (fileName.endsWith(".ini") || fileName.endsWith(".dat")) {
      if (fileName.endsWith(".ini")) {
        let d3FolderName = currentFile.data.relativePath.match(
          /.*\/(\S*)\/Slidedat.ini/
        )[1];
        let reader = new FileReader();
        reader.readAsText(currentFile.data);
        reader.onload = (e) => {
          const ini_data = e.target.result;
          const fileCount = parseInt(
            ini_data.match(/FILE_COUNT = (\S*)\r\n/)[1]
          );
          d3UploadCount({
            d3_folder_name: d3FolderName,
            file_count: fileCount,
          });
        };
      }
      return true;
    }
    $.ajax({
      async: false,
      url: window._CONFIG.REACT_APP_BASE_API + "/upload/hasUploaded",
      xhrFields: {
        withCredentials: true, // 发送Ajax时，Request header中会带上 Cookie 信息。
      },
      data: {
        file_name: fileName,
      },
      type: "GET",
      success: function (data) {
        // let data = res.data;
        console.log({ data });
        if (data.code == "0") {
          let resHasUploaded = parseInt(data.data.has_uploaded);
          if (resHasUploaded !== 0) {
            hasUploaded = true;
            message.success({
              content: `文件${fileName}已存在,请勿重复上传!`,
              duration: 2,
              key: 1,
            });
          }
        } else {
          hasUploaded = true;
          message.error({ content: data.msg, duration: 2, key: 1 });
        }
      },
    });
    return !hasUploaded;
  }
  /*判断是否已存在该文件结束*/

  render() {
    const { percentDisk } = this.state;
    const { visible, onCancel } = this.props;

    return (
      <Modal
        className="upload-modal"
        width={800}
        title="上传"
        footer={null}
        visible={visible}
        onCancel={onCancel}
      >
        <Dashboard
          inline={true}
          uppy={this.uppy}
          showProgressDetails
          proudlyDisplayPoweredByUppy={false}
          note="3D文件请拖拽文件夹上传,支持tif、tiff、kfb（江丰）、tmap（优纳）、mrxs（3D）、svs、svslide、vms、ndpi、scn、bif等多种格式"
          locale={{
            strings: {
              dropPaste:
                "3D文件请拖拽文件夹至此处、其他文件可拖拽文件至此处或者%{browse}",
              browse: "浏览本地",
            },
          }}
        />
      </Modal>
    );
  }
}

bizcharts（绘图）

 "@ant-design/charts": "^1.0.13",
 "bizcharts": "^3.5.3-beta.0",

form-render（模板渲染）

fr-generator（模板编辑）

html2pdf.js（元素导出为pdf）

import html2pdf from "html2pdf.js";
 exportPDF = (name) => {
    // 要导出的dom节点，注意如果使用class控制样式，一定css规则
    const element = document.getElementById("preview_report");
    // 导出配置
    const opt = {
      margin: 0,
      filename: `${name}.pdf`,
      image: { type: "jpeg", quality: 0.98 }, // 导出的图片质量和格式
      html2canvas: { scale: 1, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
      jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
    };
    if (element) {
      html2pdf().set(opt).from(element).save(); // 导出
    }
  };

js-cookie（获取cookie）

import Cookies from 'js-cookie'

const TokenKey = 'USER-TOKEN'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

js-md5(md5编码)

   "js-md5": "^0.7.3",
   import md5 from "js-md5";
   export function encryptionReq(data) {
      return md5(JSON.stringify(data)+123);
    }

jsbarcode（条形码）

JsBarcode("#barcode", 234, {
      width: 1,
      height: 50,
      displayValue: false,
});
<img
alt=""
id="barcode"
style={{
       position: "absolute",
       bottom: "-7px",
       left: "-3px",
       zIndex: "-1",
      }}
      />

qrcode.react（二维码）

"qrcode.react": "^1.0.1",
import QRCode from 'qrcode.react';
<QRCode value={qrcodeUrl} size={200} />

numeral(格式化货币)

  "numeral": "^2.0.6",
  import numeral from "numeral";
  const yuan = (val) => `¥ ${numeral(val).format("0,0")}`;

openseadragon（像地图那么大的图的展示）

  "openseadragon": "2.4.2",
  "openseadragon-paperjs-overlay": "0.1.2",
  "paper": "0.9.25", 大图上的绘制标点工具
  
  

react-pdf（pdf文件渲染）

   "react-pdf": "^4.2.0",
import React, { useState } from 'react'
import { Pagination } from "antd";
import { Document, Page } from 'react-pdf/dist/entry.webpack'
import 'react-pdf/dist/Page/AnnotationLayer'
import instructions from '@assets/pdf/instructions.pdf'

const Instructions = () => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  }

  const onChangePage = (page) => {
    setPageNumber(page);
  }

  return (
    <>
      <Document
        file={instructions}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page renderTextLayer={true} width={900} pageNumber={pageNumber} />
        <Pagination
          className="text-center helpful-pagination"
          responsive
          simple
          current={pageNumber}
          total={numPages * 10}
          onChange={onChangePage}
        />
      </Document>
    </>
  )
}

export default Instructions

react-to-print（打印）

import ReactToPrint from "react-to-print";
<ReactToPrint
              trigger={() => (
                <button
                  id="printBtn"
                  style={{
                    color: " #1e88c7",
                    background: "d0eeff",
                    padding: "4px 12px",
                    borderRadius: "4px",
                    border: "1px solid #99d3f5",
                    cursor: "pointer",
                  }}
                >
                  打印
                </button>
              )}
              content={() => this.componentRef}
            />
<div
            ref={(el) => (this.componentRef = el)}
            id="preview_report"
            style={{
              fontFamily: '"宋体"',
              overflow: "hidden",
              padding: "5mm 0 5mm 5mm",
              // marginRight: "5mm",
              fontSize: "17px",
              position: "relative",
              // width: "1030px",
              // height: "100%",
              // height: "1527px",
              width: "210mm",
              height: "279mm",
            }}
          >
            <Basic schema={schema} />
          </div>

socket.io（websocket)

xterm(网页端终端)

"xterm": "^4.18.0",
    "xterm-addon-fit": "^0.5.0"
    我掘金有相关文章

uuid （生成一个随机码）

"uuid": "^8.3.2"
生成一个随机码

工程

compression-webpack-plugin（压缩）

  "compression-webpack-plugin": "^5.0.1",
  
   plugins: [
      new CompressionWebpackPlugin({
                algorithm: "gzip",
                test: new RegExp(
                  "\\.(" + ["js", "css", "less", "ttf"].join("|") + ")$"
                ),
                threshold: 1024,
                minRatio: 0.8,
                // deleteOriginalAssets: true, //去掉原文件，只保留gz文件。
              }),

http-proxy-middleware（代理）

后面在package.json里直接这样用就行了，就是不能正则判断要代理的请求，以及多个指向
"proxy": "http://192.xx"