读取 excel 表格安装 xlsx1npm install xlsx --save-dev 引入插件1import * as xlsx from "xlsx/xlsx.mjs"; 读取 excel 表格123456789101112131415161718192021222324252627282930313233343536373839404142434445<template> <form ref="fileRef"> <input type="file" ref="upload" accept=".xls,.xlsx" @change="readExcel" class="upload-button" /> <span class="tips">支持扩展名：.xls .xlsx，且不超过100M</s ...

实现思路通过调整图片的分辨率或者绘图质量来达到图片压缩的效果： 获取上传 Input 中的图片对象 File 将图片转换成 base64 格式 base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的 转换后的图片生成对应的新图片，然后输出 获取上传 Input 中的图片对象 File12345678910111213141516171819202122232425/** * 压缩图片 * @param {File} file : 图片 * @param {Number} maxSize ：最大文件大小 */export const compressImage = (file, maxSize = 1024 * 1024 * 0.5) => { if (file.size > maxSize) { canvasDataURL(file, (blob ...

引用站外地址 JZip 官方文档 一个用于创建，读取和编辑.zip文件的JavaScript库 引用站外地址 file-saver 官方文档 是在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用 一、安装 JZip 和 file-saver1npm install file-saver jszip --save 二、导入12import { saveAs } from 'file-saver'import * as JSZip from 'jszip' 三、使用123456789101112131415// arr={name:***,url:***}downloadZip(arr, name = "qrcode") { const zip = new JSZip(); // 实例化zip const ...

注意：无法绘制跨域图片 引用站外地址 html2canvas 官方文档 Screenshots with JavaScript 安装 html2canvas1npm i html2canvas 引入1import html2canvas from 'html2canvas' 使用12345678910111213141516171819202122232425262728293031<template> <div class="code">存为图片</div> <button @click="generateImages">下载</button></template><script>import html2canvas from "html2canvas";export default { ... methods:{ ...

控制视口外的图片进入视口时候再进行加载，从而提升页面初始化渲染性能和用户体验。 <img>标签形式首先，标签通过 src 属性的 url 来加载图片，因此将需要懒加载的图片 url 添加到 data-src 属性，这样 src 为空就不会加载图片了。 123<img data-src="https://img.dpm.org.cn/Uploads/Picture/2021/05/31/s60b446b015652.jpg"/> 用Intersection Observer检测图片是否进入视口，目前不支持 IE 1234567891011121314151617if ("IntersectionObserver" in window) { lazyloadImages = document.querySelectorAll(".lazy"); var imageObserver = new IntersectionObserver(function (entries, observe ...

实现步骤 连接数据库 请求需要爬取的内容 解析获取的数据 写入数据库 安装并引入所需依赖1npm install --save mysql axios cheerio 123const mysql = require('mysql') // 操作数据库const axios = require('axios') // 发起请求const cheerio = require('cheerio') // 解析HTML 连接数据库1234567891011121314var connection = mysql.createConnection({ host: 'XXXXXXX', user: 'XXXXXXX', password: 'XXXXXXX', database: 'XXXXXXX',})connection.connect((err) => { if (err) { ...

错误写法使用forEach循环 123456function fn() { arr.forEach(async () => { await syncMethod(); });}// 结果：多个异步函数syncMethod()会并行执行。 正确写法使用for i循环 123456async function fn() { for (let i = 0; i < arr.length; i++) { await syncMethod(); }}// 结果：在上一个异步函数执行结束后再开始执行下一个。 原因 forEach的回调函数都是同步调用的，在forEach的回调里进行异步操作，每次遍历进行的这些异步操作会并行执行。在 JavaScript 中几乎所有的回调函数都是异步调用的，但是forEach方法的回调函数是同步调用的，同样，find()和findIndex()函数也都是同步调用回调函数的。

JavaScript 没有内置的 sleep 函数，如需阻塞程序运行，需要自己实现。 定义 sleep 方法123function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms));} 使用 async await 调用1234567async function fn() { console.log(1); await sleep(3000); console.log(2); await sleep(3000); console.log(3);}

页面效果 当【来款方式】= 银行来款，【来款银行】必填，选择其他选项，非必填。 代码实现 rules 判断要写在 el-form-item 中。 1234567891011121314151617181920212223<el-col :span="8"> <el-form-item label="来款方式" prop="fIncomeWay"> <eIncomeWay v-model="form.fIncomeWay" /> </el-form-item></el-col><el-col :span="8"> <el-form-item label="来款银行" prop="fOppositeBank" :rules="form.fIncomeWay == 726 ? rules.fOppositeBank : [{ ...

定义转换函数12345678910111213141516function pages(arr, len) { const pages = []; arr.forEach((item, index) => { const page = Math.floor(index / len); if (!pages[page]) { pages[page] = []; } pages[page].push(item); }); return pages;}// 使用const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(pages(arr, 3)); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]console.log(pages(arr, 8)); // [[1, 2, 3, 4, 5, 6, 7, 8], [9]] 应用场景略。