曦的博客

前端使用xlsx模板导出表格

Wed, 04 Sep 2024 16:26:04 +0800

前言

前端导出表格有很多种方案，但是表格样式一旦复杂了，那么就得用代码写excel的样式，还是比较麻烦的。每次样式不一样，就得重新写，这时使用表格模板的优势就体现出来了，想导出不同样式的表格直接修改表格模板即可。

方案

我找了两种方案：
1、使用xlsx-template，利用模板语法在xlsx中占位填充后编辑导出。
2、使用exceljs，读取模板后，利用行列坐标定位编辑后导出。
两种我都尝试过，第一种方案类似我这篇文章(http://xiblogs.top:1111/?id=27) 中使用的docxtemplater，只不过是docx换成了xlsx，但xlsx-template在浏览器端的兼容不如docxtemplater那么好，你得处理fs、path之类的问题，当然也有老哥(https://www.jianshu.com/p/85c844d96cfb) 通过改项目配置的方式解决了。还是比较麻烦的而且老项目不一定适用，所以我使用了第二种方案。

步骤

1、安装exceljs与file-saver

npm i exceljs
npm i file-saver

2、xlsx模板放在项目的public目录下。

3、使用fetch的方式读取public下的xlsx模板。

let response = await fetch('./static/xlsx/t1.xlsx'); //读取文件

4、将读取的数据转换为buffer再使用exceljs的workbook.xlsx.load加载数据。

let data = await response.arrayBuffer(); //转为二进制
const workbook = new ExcelJS.Workbook();
await workbook.xlsx.load(data); //读取buffer
const worksheet = workbook.getWorksheet(1); //读取第一张表

5、利用exceljs的worksheet.getCell()给指定单元格赋值，getCell参数为行列，如修改第一行第一列数据为test。

worksheet.getCell('A1').value = 'test'

6、使用exceljs的writeBuffer()读取表格为buffer后再使用file-saver的saveAs下载。

await workbook.xlsx.writeBuffer().then(async (buffer) => {
    let blob = new Blob([buffer], { type: 'application/octet-stream' });
    await saveAs(blob, 'exportExcel.xlsx');
    this.loading = false;
});

完整方法如下：

//templateExportXlsx.js
import * as ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

//使用exceljs的getCell()根据行列坐标修改表格数据
//根据模板导出xlsx，tempPath为模板路径，dataList为数据，exportName为导出文件名
//templateExportXlsx('./static/xlsx/t1.xlsx', [{ G25: 'ggg' }, { H25: 'hhh' }], '1.xlsx')
export async function templateExportXlsx(tempPath, dataList, exportName) {
  let response = await fetch(tempPath); //读取文件
  let data = await response.arrayBuffer(); //转为二进制
  let workbook = new ExcelJS.Workbook();
  await workbook.xlsx.load(data); //读取buffer
  let worksheet = workbook.getWorksheet(1); //读取第一张表
  for (let i = 0; i < dataList.length; i++) {
    let key = Object.keys(dataList[i])[0];
    let val = Object.values(dataList[i])[0];
    // console.log(key, val);
    worksheet.getCell(key).value = val; //坐标定位更新数据
  }
  // worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
  //   console.log(rowNumber, row.values);
  // });
  //下载
  await workbook.xlsx.writeBuffer().then(async (buffer) => {
    let blob = new Blob([buffer], { type: 'application/octet-stream' });
    saveAs(blob, exportName);
  });
}

最后下载导出的表格如下：

结语

使用过程中需要注意读取数据时的异步处理。

python将资源打包进exe

Tue, 12 Dec 2023 14:54:54 +0800

前言

之前py打包的exe一直是不涉及图片等资源的，直到我引入图片后打包，再双击exe发现直接提示未找到资源。

分析

我py代码中的图片引入使用的是项目相对路径，打包时pyinstaller只会引入py模块，这种路径引入的资源其实是不会打包进exe的。有人想的是可以直接将资源放到exe旁边，但这不是最优雅的方法，你发布exe还得给人家一堆相关资源文件，其实想要解决此类无法打包资源的问题其实只需要做两件事：1、修改spec打包配置。2、动态获取资源路径。

步骤

这是我的项目结构

图片资源在src下的img目录中，我在main.py中需要使用其中的图片。
在main.py中定义动态获取资源路径的函数
```
#获取资源路径
def getPath(relative_path):
  # 判断是否为frozen状态(即为打包运行状态)
  if getattr(sys, 'frozen', False):
      base_path = sys._MEIPASS
  else:
      base_path = os.path.abspath(".")
  return os.path.join(base_path, relative_path)# 返回真实路径
```
我们需要先获取项目当前状态，判断是否为frozen状态(即为打包运行状态)，是的话先获取 MEIPASS路径(MEIPASS为双击exe时系统分配的临时工作目录)，不是的话直接获取绝对路径，最后返回真实路径。

在需要获取路径的地方直接使用getPath即可，比如我要修改exe窗体图标，这样即可：

root.iconbitmap(getPath(os.path.join("src","img/logo.ico")))

我要在tk界面使用Label添加图片，这样即可：

imgImg = ImageTk.PhotoImage(Image.open(getPath(os.path.join("src","img/img.png"))))
Label(imgFrame,image=imgImg).grid(column = 0,row = 0)

最后修改spec打包配置(不懂spec的看这儿:http://xiblogs.top:1111/?id=57 )中Analysis的datas：

datas中第一个src表示你需要打包的资源目录，第二个src表示打包成exe后双击exe时释放资源在MEIPASS目录下的具体位置，这是我打包运行时系统释放资源的位置，你可以看到src就在这里，exe中的图片也加载进界面了：
结语
值得注意的是该目录打开exe即生成,关闭exe即删除，不可在此长久保存文件。类似于我篇文章(http://xiblogs.top:1111/?id=65 )修改exe图标使用base64转换ico的逻辑，当然，你现在可以直接使用MEIPASS来处理了。

修改python打包后的窗体图标、任务栏图标、exe图标

Mon, 04 Dec 2023 14:39:33 +0800

前言

我python开发的GUI界面(图形用户界面)一直是tkinter，打包exe一直是Pyinstaller。但是打包出来的exe图标、状态栏图标、窗体左上角图标一直是默认的羽毛，我想自定义。
效果
最后使用base64创建临时ico解决了该问题
步骤

创建icoToBase64.py，内容如下：

import base64

# ico转base64
open_icon = open("./img/logo.ico", "rb")
b64str = base64.b64encode(open_icon.read())  # 转换为base64编码
open_icon.close()
write_data = "imgBase64 = %s" % b64str
f = open("./img/logo.py", "w+")
f.write(write_data)# 写入文件
f.close()

创建img目录，将准备好的logo.ico放入img目录中。
运行icoToBase64.py文件，将ico转换为base64,写入py文件，得到logo.py。
引入logo.py，使用base64创建临时logo，自定义窗体图标与任务栏图标。

from img.logo import imgBase64

# 创建临时logo
def createTempLogo():  # 处理图片
    tmp = open("temp.ico", "wb+")  # 创建temp.ico临时文件
    tmp.write(base64.b64decode(imgBase64))  # 写入img的base64
    tmp.close()  # 关闭文件
...
createTempLogo()
root.wm_iconbitmap("temp.ico")# 使用wm_iconbitmap引入创建的ico
if os.path.exists("temp.ico"):
   os.remove("temp.ico")# 创建logo后需删除临时logo
...

执行命令：pyi-makespec -F -w main.py。创建main.spec配置文件，自定义exe图标。

# -*- mode: python ; coding: utf-8 -*-
# 打包命令：Pyinstaller main.spec

block_cipher = None

a = Analysis(
    ['main.py'],# 需要打包的文件
    pathex=[],
    binaries=[],
    datas=[],
    hiddenimports=[],
    hookspath=[],
    hooksconfig={},
    runtime_hooks=[],
    excludes=[],
    win_no_prefer_redirects=False,
    win_private_assemblies=False,
    cipher=block_cipher,
    noarchive=False,
)
pyz = PYZ(a.pure, a.zipped_data, cipher=block_cipher)

exe = EXE(
    pyz,
    a.scripts,
    a.binaries,
    a.zipfiles,
    a.datas,
    [],
    name='批量修改照片拍摄时间_v0.0.1',# 打包后的名字
    debug=False,
    bootloader_ignore_signals=False,
    strip=False,
    upx=True,
    upx_exclude=[],
    runtime_tmpdir=None,
    console=False,# 双击exe是否显示cmd窗口
    disable_windowed_traceback=False,
    argv_emulation=False,
    target_arch=None,
    codesign_identity=None,
    entitlements_file=None,
    icon='./img/logo.ico'# 打包后的exe图标
)

一般使用Pyinstaller打包，是使用命令的，各种参数就加在命令里面，但其实还可以使用spec这种配置文件的打包方式，只需要运行Pyinstaller main.spec这个命令即可，无需在命令中添加参数。Analysis中的第一个列表就是需要打包的py文件，我这里是打包main.py文件(支持添加多个)。EXE中也可修改，其中比较常用的就是name与icon，分别用于自定义打包后的exe名称与exe图标。

结语

最后不管是直接运行还是打包exe后运行，会发现窗体图标、任务栏图标、exe图标都变成了自定义的图标。

pinia的使用

Thu, 09 Nov 2023 14:41:22 +0800

前言

最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。

使用方法

安装pinia:
```
npm i pinia
```

main.js中引入pinia:

//main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')

创建store仓库：

在src下创建store目录，目录下创建index.js文件:
在index.js中利用pinia的defineStore方法创建仓库，一般使用只会用到defineStore的前两个参数(第三个参数可做持久化配置)，下面是setup组合式写法(你也可以改为选项式写法)。
第一个参数为一个字符串，作为仓库的唯一id；第二个参数为一个方法，内部可定义需要存储的数据，定义完成后返回即可，你可以在此处定义多个数据，也可在defineStore之外多次使用defineStore创建多个仓库。

定义的时候有几个取巧的办法：可以使用ref给数据添加响应式特性。只需定义set方法，无需定义get方法。

// /store/index.js
import { defineStore } from "pinia";
import { ref } from "vue";
export const piniaStore = defineStore(
  "piniaStore",
  () => {
      const pageData = ref(1);//页面数据
      const setPageData = () => {
          pageData.value = pageData.value * 2;
      };//设置页面数据

      return {
          pageData,
          setPageData
      };
  },
);

页面使用

使用仓库前必须先引入仓库创建store。
获取仓库数据可借助计算属性computed直接取出。
修改仓库数据可直接调用返回的对应set方法即可，此处方法没有传参直接在仓库内部修改的数据，你也可以传参使用外部数据修改。

<template>
        <h1>{{ pageData }}</h1>
        <button @click="setData">设置数据</button>
</template>
<script setup>
import { computed } from 'vue';
import { piniaStore } from '@/store/index.js';
let store = piniaStore(),//获取仓库
      pageData = computed(() => {
        return store.pageData;//获取仓库中的数据
      });
const setData = () => {
    store.setPageData();//设置仓库中的数据
};
</script>

点击前页面显示：

点击后页面显示：

到此处其实你就已经学会使用pinia了，比vuex简单多了吧？但我当前项目需要对数据进行持久化处理，不处理页面刷新之后数据全部会重置，无法保存状态。

持久化

其实可以直接使用sessionStorage或localstorage实现前端数据持久化。
但数据一旦多了，你会发现代码里面全是setItem、getItem，会有大量的重复代码。

有人说直接封装不久得了？就像这样：

//storeTools.js
//写入仓库
export const setStore = (key, value) => {
  sessionStorage.setItem(key, JSON.stringify(value));
}
//读取仓库
export const getStore = (key) => {
  return JSON.parse(sessionStorage.getItem(key));
}
//清除所有仓库
export const clearStore = () => {
  sessionStorage.clear();
}

当然你也可以这样做，但在有轮子的情况下，我还是倾向于直接用轮子的，况且轮子提供的功能远比自己封装的方法多。
下面是pinia的持久化步骤：

安装插件：
```
npm i pinia-plugin-persistedstate
```

main.js引入插件:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);//pinia持久化
app.use(pinia);
app.mount('#app')

pinia配置插件，其实就是利用pinia中defineStore方法的第三个参数，直接传入一个对象persist，对象中enabled表示启用持久化，storage表示持久化方式(可选sessionStorage、localstorage)：

import { defineStore } from "pinia";
import { ref } from "vue";
export const piniaStore = defineStore(
 "piniaStore",
 () => {
     const pageData = ref(1);//页面数据
     const setPageData = () => {
         pageData.value = pageData.value * 2;
     };//设置页面数据

     return {
         pageData,
         setPageData
     };
 },
 {
     persist: {
         enabled: true,
         storage: sessionStorage,
     }
 }
);

现在再操作页面后，数据会保存在sessionStorage中，刷新数据不会重置丢失。

结语

其实vuex也有自己的持久化方法，但我还是倾向于pinia，毕竟更简洁方便了。

纯前端实现图片验证码

Wed, 01 Nov 2023 22:03:39 +0800

前言

之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的，想了下，前端其实可以直接canvas实现，减轻服务器压力。

实现

子组件，允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接调用(需要利用ref实现)，点击验证码也可手动刷新。

//VerifyCodeImg.vue
<!--验证码生成-->
<template>
    <canvas id="canvasDom" :width="props.canvasWidth" :height="props.canvasHeight" @click="drawPic"></canvas>
</template>

<script setup>
import { onMounted, onBeforeUnmount, computed } from 'vue';
let props = defineProps({
    canvasWidth: { // 容器宽度
        type: Number,
        default: 100
    },
    canvasHeight: { // 容器高度
        type: Number,
        default: 40
    },
    refreshTime: {//验证码刷新间隔时间
        type: Number,
        default: 60
    }
}),
    emits = defineEmits(['getVerifyCodeStr']),
    verifyCodeTimeId = null,//定时器id
    randomStr = '0123456789abcdefghijklmnopqrstuvwxyz',// 所有随机字符串
    trueRefreshTime = computed(() => {
        return props.refreshTime * 1000;
    }),
    verifyCodeStr = '';//验证码字符串

onMounted(() => {
    initVerifyCodeImg();
});

// 初始化
const initVerifyCodeImg = () => {
    drawPic();
    verifyCodeTimeId = setInterval(() => {
        drawPic();
    }, trueRefreshTime.value);
};

// 绘制验证码图片
const drawPic = () => {
    randomCode();
    let canvas = document.getElementById('canvasDom')
    let ctx = canvas.getContext('2d')
    ctx.textBaseline = 'bottom'
    // 绘制背景
    ctx.fillStyle = '#e6ecfd'
    ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight)
    // 绘制文字
    for (let i = 0; i < verifyCodeStr.length; i++) {
        drawText(ctx, verifyCodeStr[i], i)
    }
    drawLine(ctx)
    drawDot(ctx)
};

//4个随机字符
const randomCode = () => {
    verifyCodeStr = ''
    for (let i = 0; i < 4; i++) {
        let txt = randomStr[randomNum(0, randomStr.length)];
        verifyCodeStr += txt;
    }
    emits('getVerifyCodeStr', verifyCodeStr);
};

// 随机数
const randomNum = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min)
};

// 随机色
const randomColor = (min, max) => {
    let r = randomNum(min, max)
    let g = randomNum(min, max)
    let b = randomNum(min, max)
    return 'rgb(' + r + ',' + g + ',' + b + ')'
};

// 绘制文字
const drawText = (ctx, txt, i) => {
    let fontSizeMin = 30,// 字体最小值
        fontSizeMax = 40;// 字体最大值
    ctx.fillStyle = randomColor(50, 160) // 随机生成字体颜色
    ctx.font = randomNum(fontSizeMin, fontSizeMax) + 'px SimHei' // 随机生成字体大小
    let x = (i + 1) * (props.canvasWidth / (verifyCodeStr.length + 1))
    let y = randomNum(fontSizeMax, props.canvasHeight - 5)
    var deg = randomNum(-30, 30)
    // 修改坐标原点和旋转角度
    ctx.translate(x, y)
    ctx.rotate(deg * Math.PI / 180)
    ctx.fillText(txt, 0, 0)
    // 恢复坐标原点和旋转角度
    ctx.rotate(-deg * Math.PI / 180)
    ctx.translate(-x, -y)
};

// 绘制干扰线
const drawLine = (ctx) => {
    for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = randomColor(100, 200)
        ctx.beginPath()
        ctx.moveTo(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight))
        ctx.lineTo(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight))
        ctx.stroke()
    }
};

// 绘制干扰点
const drawDot = (ctx) => {
    // 绘制干扰点
    for (let i = 0; i < 30; i++) {
        ctx.fillStyle = randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(randomNum(0, props.canvasWidth), randomNum(0, props.canvasHeight), 1, 0, 2 * Math.PI)
        ctx.fill()
    }
};

//暴露绘制图片方法供父组件使用
defineExpose({
    drawPic
});

onBeforeUnmount(() => {
    clearInterval(verifyCodeTimeId);//页面销毁前，需要清除定时器
});

</script>

<style scoped lang='scss'>
#canvasDom {
    cursor: pointer;
}
</style>

父组件使用。

<VerifyCodeImg :refreshTime="1" ref="verifyCodeImgRef" @getVerifyCodeStr="getVerifyCodeStr" />

结语

上面是vue3的实现，你也可以改写为vue2的。

js玩儿爬虫

Thu, 10 Aug 2023 21:45:44 +0800

前言

提到爬虫可能大多都会想到python，其实爬虫的实现并不限制任何语言。
下面我们就使用js来实现，后端为express，前端为vue3。

实现功能

话不多说，先看结果：

这是项目链接：https://gitee.com/xi1213/worm
项目用到的库有：vue、axios、cheerio、cron、express、node-dev
计划功能有：

微博热榜爬取。
知乎热榜爬取。
B站排行榜爬取。
三个壁纸网站爬取。
随机生成人脸。
爬取指定页面所有图片。
删除爬取的数据。
定时任务(开发中)。

使用形式为：
双击打包出的exe(最好右键管理员运行，以防权限不足)。

双击exe后会弹出node后端启动的黑框。

自动在浏览器中打开操作界面(用户界面)。

爬取出的数据在exe同级目录下的exportData中。

具体实现

微博热榜

打开微博官网，f12分析后台请求，会发现它的热榜数据列表在请求接口：https://weibo.com/ajax/side/hotSearch 中，无参。

在接口列表realtime中根据页面信息，推测其字段含义：

word为关键字，
category为类别，
https://s.weibo.com/weibo?q=%23 + word为链接，
num为热度。

既然数据是现成的，那我们直接使用axios即可。
获取到数据列表后将其遍历拼接成指定格式的字符串，写入txt，下面是具体方法：
weibo.js

let axios = require('axios'),
    writeTxt = require("../utils/writeTxt"),
    { addMsg } = require("../store/index");

//抓取weibo
async function weiboWorm(dir, time) {
    let com = 'https://weibo.com';
    addMsg(`${com} 爬取中...`)
    let res = await axios.get(`${com}/ajax/side/hotSearch`);
    //拼接数据
    let strData = `微博热榜\r\n爬取时间：${time}\r\n`
    await res.data.data.realtime.forEach((l, index) => {
        strData = strData +
            '\r\n序号：' + (index + 1) + '\r\n' +
            '关键字：' + l.word + '\r\n' +
            '类别：' + l.category + '\r\n' +
            '链接：https://s.weibo.com/weibo?q=%23' + l.word.replace(/\s+/g, "") + '\r\n' +
            '热度：' + l.num + '\r\n' +
            '\r\n\r\n=================================================================================================================='
    })
    writeTxt(`${dir}/weibo_${Date.now()}.txt`, strData);//写入txt
    addMsg('$END');
}

module.exports = weiboWorm;

writeTxt.js

let fs = require('fs');

//写入txt
function writeTxt(filePath, data) {
    fs.writeFile(filePath, data, (err) => {
    })
}

module.exports = writeTxt;

需要注意的是在windows中换行使用的是\r\n，在链接中需要去掉空格。

知乎热榜

打开知乎官网，会发现它是需要登录的。
f12后点击左上角第二个按钮，在浏览器中切换为手机布局，刷新后即可不登录显示文章信息。
分析请求发现文章数据在请求接口：https://www.zhihu.com/api/v3/explore/guest/feeds 中，参数为limit，限制文章数。

根据页面信息推测接口字段含义：

target.question.title为问题标题，
https://www.zhihu.com/question/ + target.question.id为问题链接，
target.question.answer_count为问答数，
target.question.author.name为提问的用户名，
https://www.zhihu.com/org/ + target.question.author.url_token为提问的用户链接，
target.content为高赞回答的内容。

需要注意的是高赞回答的内容中有html的标签，需要自己str.replace(/xxx/g,’’)去除。
数据的具体获取方法同微博类似。

B站排行榜

打开B站官网，找到排行榜，f12后发现数据在接口请求：https://api.bilibili.com/x/web-interface/ranking/v2 中，无参。

推测接口字段含义：

title为视频标题，
short_link_v2为视频短链，
stat.view为视频浏览量，
desc为视频描述，
pic为视频封面，
owner.name为视频作者，
pub_location为发布地址，
https://space.bilibili.com/ + owner.mid为作者链接。

数据的具体获取方法同微博类似。

壁纸网站爬取

项目使用了下面三个网站作为例子：
http://www.netbian.com/

https://www.logosc.cn/so/

https://bing.ioliu.cn/

具体思路如下：

用axios请求页面。
将请求到的数据使用cheerio.load解析(cheerio为node中的jq,语法同jq)。
f12分析需要的数据在什么元素中，使用cheerio获取到该目标元素。
获取到元素中img的src内容。
axios请求src(需要encodeURI转码，防止中文报错)，记得设置responseType为stream。
有分页的需要考虑到动态改变url中的页码。
需要保证下载顺序，一张图片下载完成后才能下载另一张，否则下载量过大会有下载失败的可能，使用for配合async与await即可。

具体实现代码如下：
bian.js

let fs = require('fs'),
    cheerio = require('cheerio'),
    axios = require('axios'),
    downloadImg = require("../utils/downloadImg.js"),
    { addMsg } = require("../store/index");

//抓取彼岸图片
async function bianWorm(dir, pageNum) {
    let page = pageNum,//抓取页数
        pagUrlList = [],
        imgList = [],
        index = 0,
        com = 'https://pic.netbian.com';
    addMsg(`${com} 爬取中...`)
    for (let i = 1; i <= page; i++) {
        let url = i == 1 ? `${com}/index.html` : `${com}/index_${i}.html`;
        let res = await axios.get(url);
        let $ = cheerio.load(res.data);//解析页面
        let slistEl = $('.slist');//找到元素列表
        slistEl.find('a').each(async (j, e) => {
            pagUrlList.push(`${com}${$(e).attr('href')}`);//获取到页面url列表
        })
    }
    pagUrlList.forEach(async (p, i) => {
        let pRes = await axios.get(p);
        let p$ = cheerio.load(pRes.data);//解析页面
        let imgEl = p$('.photo-pic').find('img');//找到元素列表
        let imgUrl = `${com}${imgEl.attr('src')}`;//获取图片url
        imgList.push(imgUrl);
        index++;
        //循环的次数等于列表长度时获取图片
        if (index == pagUrlList.length) {
            let dirStr = `${dir}/bian_${Date.now()}`;
            fs.mkdir(dirStr, (err) => { })
            downloadImg(imgList, dirStr);//下载图片
        }
    })
}

module.exports = bianWorm;

downloadImg.js

let fs = require('fs'),
    axios = require('axios'),
    { addMsg } = require("../store/index");

//下载图片
async function downloadImg(list, path) {
    if (list.length == 0) {
        addMsg('$END');
        return;
    }
    // console.log(list.length);
    for (let i = 0; i < list.length; i++) {
        let url = encodeURI(list[i]);//转码,防止url中文报错
        try {
            //计算下载的百分比
            let percent = ((i + 1) / list.length * 100).toFixed(2);
            let msgStr = `${percent}% 爬取中... ${url}`;
            addMsg(msgStr);
            if (i == list.length - 1) {
                msgStr = `图片爬取完成，共${list.length}项。`
                addMsg(msgStr);
                addMsg('$END');
            }
            let typeList = ['jpg', 'png', 'jpeg', 'gif', 'webp', 'svg', 'psd', 'bmp', 'tif', 'tiff', 'ico'];
            let type = typeList.find((item) => {
                return url.includes(item);
            });//获取图片类型
            (type == undefined) && (type = 'jpg');//判断type是否为undefined
            const imgPath = `${path}/${i + 1}.${type}`;//拼接本地路径
            const writer = fs.createWriteStream(imgPath);
            const response = await axios
                .get(url, { responseType: 'stream', timeout: 5000 }).catch(err => { });
            response.data.pipe(writer);
            await new Promise((resolve, reject) => {
                writer.on('finish', resolve);
                writer.on('error', reject);
            });

        } catch (error) { }
    }
}
module.exports = downloadImg;

值得注意的是需要保证准确获取图片资源的不同后缀。

随机生成人脸

这里可没有人脸算法之类的，调用的是https://thispersondoesnotexist.com/ 站点的接口，此接口每次刷新可生成不同人脸。
axios请求接口后，使用fs的createWriteStream创建可写流，将数据流写入文件中，下面是具体实现方法：
randomFace.js

let fs = require('fs'),
    axios = require('axios'),
    { addMsg } = require("../store/index");

//生成随机人脸
async function randomFace(dir, faceNum) {
    let com = 'https://thispersondoesnotexist.com';
    addMsg(`人脸生成中...`);
    let dirStr = `${dir}/randomFace_${Date.now()}`;
    fs.mkdir(dirStr, (err) => { })
    for (let i = 1; i <= faceNum; i++) {
        await axios.get(com, { responseType: 'stream' })
            .then((resp) => {
                const writer = fs.createWriteStream(`${dirStr}/${i}.jpg`);// 创建可写流
                resp.data.pipe(writer);// 将响应的数据流写入文件
                writer.on('finish', () => {
                    //计算下载的百分比
                    let percent = ((i) / faceNum * 100).toFixed(2);
                    let msgStr = `${percent}% 人脸生成中... ${dirStr}/${i}.jpg`;
                    addMsg(msgStr);
                    if (i == faceNum) {
                        msgStr = `人脸生成完成，共${faceNum}张。`
                        addMsg(msgStr);
                        addMsg('$END');
                    }
                });
                writer.on('error', (err) => { addMsg('$END'); });
            })
    }
}

module.exports = randomFace;

爬取指定页面所有图片

思路同上面获取壁纸类似，只不过这次是获取页面所有的img标签的src。
由于范围扩大到所有页面了，所以需要考虑的情况就会比较多。
有的src中是没有http或者https的，有的src使用的是相对路径，有的可能有中文字符，还有很多我没考虑到的情况。
所以并不能爬取任意页面的所有图片，比如页面加载过慢，或者用了懒加载、防盗链等技术。
下面是我实现的方法：
allWebImg.js

let fs = require('fs'),
    cheerio = require('cheerio'),
    axios = require('axios'),
    downloadImg = require("../utils/downloadImg.js"),
    { addMsg } = require("../store/index");

//网站所有图片
async function allWebImgWorm(dir, com) {
    let imgList = [];
    addMsg(`${com} 爬取中...`);
    let res = await axios.get(com).catch(err => { });
    if (!res) {
        addMsg('$END');
        return
    }
    let $ = cheerio.load(res.data);//解析页面
    //获取到页面所有图片标签组成的列表
    $('img').each(async (j, e) => {
        let imgUrl = e.attribs.src;//获取图片链接
        if (imgUrl) {
            !imgUrl.includes('https') && (imgUrl = `https:${imgUrl}`);//判断是否有https,没有则加上
            imgList.push(imgUrl);
        }
    })
    let dirStr = `${dir}/allWebImg_${Date.now()}`;
    fs.mkdir(dirStr, (err) => { })
    downloadImg(imgList, dirStr);//下载图片
}

module.exports = allWebImgWorm;

删除爬取的数据

使用fs.unlinkSync删除文件，fs.rmdirSync删除目录。
需要提前判断文件夹是否存在。
需要遍历文件，判断是否为文件。为文件则删除，否则递归遍历。
下面是我的方法：
deleteFiles.js

let fs = require('fs'),
    path = require('path');

//删除文件夹及文件夹下所有文件
const deleteFiles = (directory) => {
    if (fs.existsSync(directory)) {
        fs.readdirSync(directory).forEach((file) => {
            const filePath = path.join(directory, file);
            const stat = fs.statSync(filePath);
            if (stat.isFile()) {
                fs.unlinkSync(filePath);
            } else if (stat.isDirectory()) {
                deleteFiles(filePath);
            }
        });
        if (fs.readdirSync(directory).length === 0) {
            fs.rmdirSync(directory);
        }
    }
    fs.mkdir('./exportData', (err) => { })
};

module.exports = deleteFiles;

定时任务

项目中该功能正在开发中，只放了一个按钮，但思路已有了。
在node中的定时操作可用cron实现。
下面是一个小例子，每隔10秒打印一次1：

const cron = require('cron');

async function startTask() {
     let cronJob = new cron.CronJob(
    //秒、分、时、天、月、周
    //通配符：,（时间点）-（时间域）*（所有值）/（周期性,/之前的0与*等效）?（不确定）
     '0/10 * * * * *',
     async () => {
     console.log(1);
         },
         null,
         true,
         'Asia/Shanghai'//时区标识符
     );
};

注意事项

Server-Sent Events(SSE)

该项目中前后端数据交互接口大多使用的是get请求，但有一个除外，反显爬取进度的接口：/getTaskState。
该接口使用的是SSE，爬取的进度与链接是实时显示的。
最近火热的ChatGPT的流式输出(像人打字一样一个字一个字的显示)使用的便是这个。
SSE虽然与WebSocket一样都是长链接，但不同的是，WebSocket为双工通信(服务器与客户端双向通信)，SSE为单工通信(只能服务器向客户端单向通信)。
项目中node服务端发送数据是这样的：

// 事件流获取任务状态
    app.get('/getTaskState', async (req, res, next) => {
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive',
        });
        let sendStr = ''//发送的消息
        let id = setInterval(() => {
            msgList = getMsg();
            //消息列表不为空且最后一条消息不等于上一次发送的消息才能执行
            if (msgList.length != 0 && msgList[msgList.length - 1] != sendStr) {
                sendStr = msgList[msgList.length - 1];
                console.log('\x1B[32m%s\x1B[0m', sendStr)
                res.write(`data: ${sendStr}\n\n`);//发送消息
            }
        }, 10);
        req.on('close', () => {
            clearMsg();//清空消息
            res.end();//结束响应
            clearInterval(id);//清除定时器(否则内存泄漏)
        });
    });

需要在res.writeHead中Content-Type设置为text/event-stream即表示使用SSE发送数据。
res.write(‘data: test\n\n’)即表示发送消息:test，每次发送消息需要以data:开头，\n\n结尾。
使用setInterval控制消息发送频率。
需要在服务端监听何时关闭，使用req.on(‘close’,()=>{})。
监听到关闭时执行响应结束res.end()与清除定时器clearInterval(id)。
在vue客户端接收数据是这样的：

//事件流获取任务状态
const getTaskState = () => {
  stateMsg.value = "";
  isState.value = true;
  let eventSource = new EventSource(origin.value + '/getTaskState');
  eventSource.onmessage = (event) => {
    if (event.data != '$END') {
      stateMsg.value = event.data;
    } else {
      eventSource.close();//关闭连接(防止浏览器3秒重连)
      stateMsg.value = '执行完成！是否打开数据文件夹？';
      isState.value = false;
      setTimeout(() => {
        confirm(stateMsg.value) &&
          axios.get(origin.value + '/openDir').then(res => { })//打开数据文件夹
      }, 100);
    }
  };
  //处理错误
  eventSource.onerror = (err) => {
    eventSource.close();//关闭连接
    stateMsg.value = ''
    isState.value = false;
  };
};

直接在方法中new一个EventSource(url)，这是H5中新提出的对象，可用于接收服务器发送的事件流数据。
使用EventSource接收数据，直接在onmessage中获取event.data即可。
关闭连接记得使用eventSource.close()方法，因为服务器单方面关闭连接会触发浏览器3秒重连。
处理错误使用eventSource.onerror方法。
关于关闭SSE连接的时机，这是由node服务端决定的。
我在后端有一个store专门用于存储消息数据：
store/index.js

let msgList = [];//消息列表

function addMsg(msg) {
    msgList.push(msg);
}

function getMsg() {
    return msgList;
}

function clearMsg() {
    //清空msgList中元素
    msgList = [];
}

module.exports = {
    addMsg,
    getMsg,
    clearMsg
};

在爬取数据时，后端会计算爬取的进度，将生成的消息字符串push到msgList列表中，每隔10ms发送给前端msgList列表中的最后一个元素。
当后端数据爬取完成时会向msgList中push存入指定字符串：$END，表示获取完成。
当前端识别到获取的消息为$END时，关闭连接。
后端监听到前端连接被关闭，则后端也关闭连接。

pkg打包

全局安装pkg时最好网络环境为可访问github的环境，否则你只能手动下载那个失败的包再扔到指定路径。
pkg安装完成后需要在package.json中配置一番(主要是配置assets，将public与需要的依赖包打包进exe中)。
这是我的package.json配置：

{
  "name": "worm",
  "version": "0.1.3",
  "description": "",
  "bin": "./index.js",
  "scripts": {
    "start": "node-dev ./index.js",
    "dist": "node pkg-build.js"
  },
  "pkg": {
    "icon": "./public/img/icon.ico",
    "assets": [
      "public/**/*",
      "node_modules/axios/**/*.*",
      "node_modules/cheerio/**/*.*",
      "node_modules/cron/**/*.*",
      "node_modules/express/**/*.*"
    ]
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.27.2",
    "cheerio": "^1.0.0-rc.12",
    "cron": "^2.3.1",
    "express": "^4.18.2",
    "node-dev": "^8.0.0"
  }
}

我的打包命令是通过scripts中的dist在pkg-build.js中引入的，因为我需要将版本号输出在打包出的exe文件名中。
若打包命令直接写在package.json的scripts中会无法读取打包进程中项目的version。
这是我的pkg-build.js：

//只有通过node xxx.js方式执行的命令才能获取到package.json的version
const pkg = require('./package.json'),
    { execSync } = require('child_process');

const outputName = `dist/worm_v${pkg.version}.exe`;//拼接文件路径
const pkgCommand = `pkg . --output=${outputName} --target=win --compress=GZip`;//打包命令
execSync(pkgCommand);//执行打包命令

上面命令中的output表示输出路径(包含exe文件名)，target表示打包的平台，compress表示压缩格式。
需要注意的是使用pkg打包时，项目中axios的版本不能太高。
否则即使你将axios写在pkg的打包配置里也无济于事，我使用的axios版本为0.27.2。

解决跨域

我node使用的是express，直接在header中配置Access-Control-Allow-Origin为* 即可。

app.all('*', (req, res, next) => {
        res.header("Access-Control-Allow-Origin", "*");//允许所有来源访问(设置跨域)
        res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");//允许访问的响应头
        res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");//允许访问的方法
        res.header("X-Powered-By", ' 3.2.1');//响应头
        res.header("Content-Type", "application/json;charset=utf-8");//响应类型
        next();
    });

child_process模块

众所周知，node是单线程运行的，在主线程中执行大量计算任务时会产生无响应的问题。
但node内置的child_process模块却可以创建新的进程，在新进程中执行操作不会影响到主进程的运行。
在此项目中自动打开浏览器、打开指定文件夹、执行打包命令用的就是它。

// 打开数据文件夹
app.get('/openDir', (req, res) => {
    res.send('ok');
   //打开文件夹,exe环境下需要使用exe所在目录
    let filePath = isPkg ?
        `${path.dirname(process.execPath)}${dir.replace('./', '\\')}` :
        path.resolve(__dirname, dir);
    exec(`start ${filePath}`);
});

//监听端口
app.listen(port, () => {
    let url = `http://${ipStr}:${port}`;
    isPkg && exec(`start ${url}`);//打包环境下自动打开浏览器
    //判断是否存在exportData文件夹，没有则创建
    fs.exists(dir, async (exists) => {
        !exists && fs.mkdir(dir, (err) => { });
    })
    console.log(
        '\x1B[31m%s\x1B[0m',
        `\n
${time} 爬虫服务开启!\n
运行过程中禁止点击此窗口!\n
如需关闭爬虫关闭此窗口即可！\n`
    );
});

设置静态资源

前端使用vue开发时，需要将vue.config.js中的publicPath配置设置为./之后再打包。
将vue打包后dist内的文件拷贝到node项目的public目录下。
需要在express设置请求头之前使用static(path.join(__dirname, ‘./public’))设置静态资源：

const app = express();
const isPkg = process.pkg;//判断是否为打包环境
const port = isPkg ? 2222 : 1111;//端口
const ipStr = getLocalIp();//获取本机ip
let time = getFormatTime();//获取格式化时间
let dir = './exportData';
app.use(express.json());//解析json格式
app.use(express.static(path.join(__dirname, './public')));//设置静态资源
app.all('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");//允许所有来源访问(设置跨域)
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");//允许访问的响应头
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");//允许访问的方法
    res.header("X-Powered-By", ' 3.2.1');//响应头
    res.header("Content-Type", "application/json;charset=utf-8");//响应类型
    next();
});

关于运行时的黑框

双击exe时，不仅会弹出浏览器用户页面，还会弹出黑框，点击黑框内部还会暂停程序运行。
我有想过使用pm2守护进程干掉黑框，但想到关闭爬虫时只需关闭黑框即可，便留下了黑框。

限制爬取次数

做人，特别是做开发，你得有道德，你把人家网站给玩儿崩了这好吗(′⌒`)？
没有任何东西是无限制的，我的限制是放在前端的(可能不太严谨)，以爬取壁纸为例，调用inputLimit(num)，入参为执行次数，方法是这样的：

//输入限制
const inputLimit = (pageNum) => {
  let val = prompt(`输入执行次数(小于等于${pageNum})`, "");
  if (val == null || isNaN(val) || parseInt(val) < 1 || parseInt(val) > pageNum) {
    return false;
  }
  return parseInt(val);
};

//彼岸壁纸
const bianWorm = () => {
  let val = inputLimit(10);
  if (val) {
    axios.get(origin.value + '/bianWorm?pageNum=' + val).then(res => { });
    getTaskState();
  }
};

后端获取到pageNum参数后，以此作为执行爬虫逻辑的循环依据。

结语

这是我第一次用js玩儿爬虫，很多地方可能不太完善，还请大佬们指出，谢谢啦！
此项目仅供学习研究，勿作他用。

python项目生成exe

Tue, 04 Apr 2023 11:42:00 +0800

前言

做了个python的小项目，需要打包为桌面端的exe使用，结果一打包，体积直接上百兆了，研究了下，使用虚拟环境打出的包会更干净小巧。

安装anaconda

anaconda用作python的虚拟环境管理工具，下载地址：https://repo.anaconda.com/archive/Anaconda3-2023.03-Windows-x86_64.exe
配置anaconda环境变量
win+i 搜索“高级系统设置”，打开

点击环境变量

双击系统变量中的Path

依次添加系统环境变量(需视anaconda安装目录而定)：
D:\anaconda
D:\anaconda\Library\mingw-w64\bin
D:\anaconda\Library\usr\bin
D:\anaconda\Library\bin
D:\anaconda\Scripts
依次返回确定保存

创建anaconda虚拟环境

打开anaconda prompt
创建anaconda虚拟环境：conda create -n env_1 python==3.7.9(可自行选择版本)
验证是否创建成功：python -V
常用anaconda命令：
导出虚拟环境的列表:conda env list
导出当前环境的包:conda list
启动/切换至名为name的Python环境:conda activate name
退出虚拟环境:conda deactivate
删除虚拟环境:conda remove -n 环境名 –all
在虚拟环境中安装python打包工具pyinstaller，以及其他自己在项目中使用到的包：
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyinstaller(国内使用清华源较快)

vscode选择python解释器

打开vscode,按下ctrl+shift+p
输入：Python: Select Interpreter，点击出现的选项
点击：输入解释器路径-查找
确认选中anaconda安装路径下刚生成的虚拟环境的python.exe文件

设置vscode默认终端为cmd

点击选择默认配置文件
点击选中Command Prompt
关闭vscode，重新使用vscode打开项目，按下shift+ctrl+` ,查看是否使用cmd切换为了虚拟环境

生成spec文件

spec文件就是pyinstaller打包时的配置文件(语法为python语法)，控制台输入命令：pyi-makespec -F -w main.py(main为生成的spec文件的文件名)

编辑spec文件

# -*- mode: python ; coding: utf-8 -*-
def getExeName(): # 获取名字与版本
 import config
 return config.name + '-' + config.version
block_cipher = None
a = Analysis(
 ['main.py'], # 需要打包的py文件
 pathex=[],
 binaries=[],
 datas=[],
 hiddenimports=[],
 hookspath=[],
 hooksconfig={},
 runtime_hooks=[],
 excludes=[],
 win_no_prefer_redirects=False,
 win_private_assemblies=False,
 cipher=block_cipher,
 noarchive=False,
)
pyz = PYZ(a.pure, a.zipped_data, cipher=block_cipher)
exe = EXE(
 pyz,
 a.scripts,
 a.binaries,
 a.zipfiles,
 a.datas,
 [],
 name=getExeName(), # 打包后的名字
 debug=False,
 bootloader_ignore_signals=False,
 strip=False,
 upx=True,
 upx_exclude=[],
 runtime_tmpdir=None,
 console=False, # 双击exe是否显示cmd窗口
 disable_windowed_traceback=False,
 argv_emulation=False,
 target_arch=None,
 codesign_identity=None,
 entitlements_file=None,
 icon='./img/icon.ico' # 打包的exe图标
)

Analysis第一个参数为列表，列表中元素为需要打包的py文件，可自行添加删除，EXE为打包的exe信息，可在此处修改exe的名字、图标等。图标必须为ico格式图片，这里提供一个图片格式转换网站:https://onlineconvertfree.com/zh/convert/svg/ 。

利用spec配置打包

spec文件编辑完成后输入命令：Pyinstaller main.spec(main.spec为刚才生成的配置文件名)
出现下图即为打包成功，在项目的根目录下会生成dist目录，里面即为打包出的exe文件：

express项目的创建

Thu, 23 Mar 2023 22:57:11 +0800

前言

前端开发者若要进行后端开发，大多都会选择node.js，在node生态下是有大量框架的，其中最受新手喜爱的便是老牌的express.js，接下来我们就从零创建一个express项目。

安装node

在这里：https://nodejs.org/dist/v16.14.0/node-v16.14.0-x64.msi ，下载后直接安装。
安装完成后，验证是否安装成功，win+r输入cmd，输入命令:node -v

安装淘宝镜像cnpm

国内直接使用npm下载会比较慢，在cmd中输入命令安装淘宝cnpm：
npm install -g cnpm –registry=https://registry.npm.taobao.org
验证cnpm是否安装成功：cnpm -v

安装express-generator

express跟大多框架一样，也是有脚手架工具的，便于项目的搭建，即express-generator。
使用cnpm全局安装脚手架：cnpm install -g express-generator
验证是否安装成功：express –version

创建项目

输入命令：express test (test为项目名) 出现下图即为创建成功。
项目创建后不会自动安装依赖。安装依赖命令：npm i(i为install简写) 出现下图即为安装成功。
最终目录结构如下：
bin:项目启动脚本
node_modules：项目依赖
public：公共静态资源
routes：路由目录
views：视图目录(前后端分离开发可不用关注此)
app.js：项目入口
package-lock.json：依赖版本锁定信息
package.json：项目配置及依赖版本信息

启动项目

输入命令：npm start 会出现下图
在浏览器地址栏输入：http://localhost:3000/ 页面出现下图即为启动成功。

项目热更

在开发过程中，每次修改代码后需要npm start重启项目后，才会使得修改后的代码生效。
可以使用插件node-dev，实现项目热更。安装命令:npm i node-dev
在package.json的scripts中添加:”dev”: “node-dev ./bin/www”
热更启动项目的命令：npm run dev

无法加载nodejs\vue.ps1

Fri, 10 Mar 2023 12:02:37 +0800

发现问题

刚换了电脑之后，安装了node.js、vue/cli，在vscode中使用vue ui命令新建vue项目时，发现报错如下：

分析问题

多番查询后发现,一般此类问题大多出现在第一次运行脚本的电脑中，因为PowerShell的默认执行策略是禁止系统允许脚本命令的执行，如果需要允许类似命令需要允许脚本执行。

解决办法

管理员身份运行powershell
输入命令：set-ExecutionPolicy RemoteSigned后按下回车
输入：y

vue3实现一个抽奖小项目

Fri, 20 Jan 2023 14:33:54 +0800

前言

在公司年会期间我做了个抽奖小项目，我把它分享出来，有用得着的可以看下。
浏览链接：https://xiblogs.top/original/other/luckDraw/index.html
项目链接：https://gitee.com/xi1213/luck-draw (欢迎star!)
项目截图：

实现目标

数据保存：无后端，纯前端实现，浏览器刷新或者关闭数据不能丢失。
姓名切换：点击中部开始按钮姓名快速切换。
奖项切换：奖项为操作人员手动切换设置。
历史记录：抽奖完成后需要有历史记录。
数据导入：允许参与人员的表格导入。

数据保存

无后台，纯前端实现而且需要刷新关闭浏览器数据不丢失，很容易便会想到使用localStorage，localStorage存入的数据具有持久性，不会因为刷新或关闭浏览器而变化(除非手动刻意的清除)，有别于sessionstorage，localStorage的生命周期是永久，sessionstorage是浏览器或者标签页关闭。

因为存入的数据不是单纯的字符串，而是具有结构性的对象数组，所以需要配合JSON.stringify与JSON.parse来使用。这是存入数据的方法：

localStorage.setItem("luckDrawHis", JSON.stringify(luckDrawHis));//JSON.stringify将json转换为字符串

这是读取数据的方法：

JSON.parse(localStorage.getItem("luckDrawHis"))//JSON.parse将字符串转换为json

姓名切换

抽奖的方式是数据导入后，点击中间的圆形开始按钮，姓名便开始快速切换，再次点击按钮便停止姓名切换，弹出对话框显示当前姓名以及设置的奖项。

切换姓名利用了vue的数据响应式原理。先获取到所有的参与人员数据，然后乱序处理，最后循环展示，我这里每个姓名展示的时间为50毫秒，你也可以自己设置。这里的数组乱序我使用了洗牌算法，其实就是利用Math.random获取数组的随机下标，然后与最后一个元素进行位置交换。

//洗牌算法(乱序数组)
function shuffle(arr) {
  let l = arr.length
  let index, temp
  while (l > 0) {
    index = Math.floor(Math.random() * l)
    temp = arr[l - 1]
    arr[l - 1] = arr[index]
    arr[index] = temp
    l--
  }
  return arr;
}

//循环列表
function forNameList(list) {
  list = shuffle(list);
  for (let i = 0; i < list.length; i++) {
    setTimeout(() => {
      if (!isStop.value) {
        curName.value = list[i].name;
        (i == list.length - 1) && (forNameList(nameList.value));//数组耗尽循环
      }
    }, 50 * i);
  }
}

奖项切换

奖项切换直接使用elementPlus的单选框即可。

历史记录

每次点击抽奖出现结果时，将之前的抽奖结果取出来，然后把当前的结果添加到末尾。

点击抽奖历史按钮时再将所有历史数据取出来。

数据导入

由于需要导入人员表格数据，这里我使用了xlsx插件与file-saver插件来实现。

首先是下载模板。

将事先准备好的表格模板放在项目的public目录下。

点击下载模板按钮时直接调用以下方法即可，其中的saveAs是file-saver插件中的方法，传入路径与文件名即可。

import { saveAs } from 'file-saver';
//下载模板
function downTemp() {
    let fileName = "人员模板.xlsx";//文件名
    let fileUrl = "./template/";//文件路径(路径相对index.html)
    saveAs(fileUrl + fileName, fileName);
}

表格处理好，

点击导入按钮读取表格数据时使用的是xlsx插件，下面是读取数据的方法。

import * as XLSX from "xlsx";
//导入数据
function importData(e) {
    isLoading.value = true;
    let file = e.target.files[0]; //获取事件中的file对象
    let fileReader = new FileReader(); //创建文件读取器
    fileReader.onload = (event) => {
        let result = event.target.result; //获取读取的结果
        let workBook = XLSX.read(result, { type: "binary" }); //XLSX读取返回的结果
        let jsonData = XLSX.utils.sheet_to_json(
            workBook.Sheets[workBook.SheetNames[0]]
        ); //将读取结果转换为json
        tabData.value = [];
        jsonData.forEach((j) => {
            tabData.value.push({
                name: j.姓名,
                age: j.性别,
                department: j.部门,
            });
        }); //处理成需要的数据格式
        localStorage.setItem("tabData", JSON.stringify(tabData.value));//数据存入本地
        tabDataS.value = JSON.parse(localStorage.getItem("tabData"));//取出数据
        emits("getNameList", tabData);
        isLoading.value = false;
    };
    fileReader.readAsBinaryString(file); //开始读取文件
    ((document.getElementsByClassName("inp-xlsx")[0]).value = ""); //置空选中的文件
};

结语

项目很简单，但给我的时间很少，很多优化的地方都没做好，后面有时间了再优化下，顺便适配下移动端。