本文汇总了前端开发中常用的工具库，包括文件下载、对话框控件、二维码生成、流程图编辑、OCR识别、日期处理、加密、离线存储及表格组件等功能强大的工具库。
目录
常用 cdn 网站：
https://www.jsdelivr.com/。
https://cdnjs.com/。
https://www.bootcdn.cn/。
download.js 文件下载
1、download() 函数用于触发从JavaScript下载文件。它指定放置在浏览器下载目录中的新文件的内容和名称。输入可以是数据的URL、String、Blob或Typed Array，也可以通过将文件数据表示为base64或URL编码字符串的dataURL。无论输入格式如何，download（）都使用指定的文件名和mime信息保存文件，保存方式与服务器使用Content Disposition HTTP头相同。
2、download.js 是各种下载方式的集大成者(推荐使用)，获取来源：
-
NPM：npm install downloadjs
<script src="https://cdn.bootcdn.net/ajax/libs/downloadjs/1.4.8/download.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/downloadjs/1.4.8/download.min.js"></script>3、格式：download(data, strFileName[, strMimeType]);
-
data -即将成为文件内容的Blob、File、String或dataURL。
-
strFileName -要创建的文件的名称。较旧的浏览器（如FF3.5、Ch5）不会使用您提供的文件名，而是自动命名下载的文件。
-
strMimeType -要下载的文件的MIME内容类型。虽然是可选的，但它可以帮助浏览器向用户提供更友好的下载信息，鼓励他们接受下载。
4、下载示例：src/main/resources/static/downloadJs.html · 汪少棠/fileServer - Gitee.com
// 文本内容下载
download("hello download string文本", "string文本.txt", "text/plain");
// blob 内容类型下载
download(new Blob(["hello Blob 类型"]), "dlTextBlob.txt", "text/plain");
download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");
// 通过 url 地址下载。可以是相对路径或者绝对路径，文件名称与格式自动获取
download("https://cdn.bootcdn.net/ajax/libs/downloadjs/1.4.8/download.js");
// 下载HTML页面源码
download(document.documentElement.outerHTML, "dlHTML页面源码.html", "text/html");
// 通过url下载图片。可以是相对路径或者绝对路径，文件名称与格式自动获取。
// 名称无法自动获取时，默认为 download
download("https://nimg.ws.126.net/?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2Fdingyue.ws.126.net%2F2023%2F0125%2F49be0a0bj00rp1sop002qc000hs00psm.jpg&thumbnail=660x2147483647&quality=80&type=jpg");
// ajax 异步请求，后台返回流进行下载。
var request = new XMLHttpRequest();
request.open("GET", "/fileServer/generateScript", true);
request.responseType = "application/octet-stream";
request.onload = function (e) {
download(e.target.response, "a.sql", "application/octet-stream");
};
request.send();经典、优雅网页对话框控件 —artDialog
1、artDialog —— 经典、优雅的网页对话框控件。
支持普通与 12 方向气泡状对话框
完善的焦点处理，自动焦点附加与回退
支持 ARIA 标准
面向未来：基于 HTML5 Dialog 的 API
支持标准与模态对话框
丰富且友好的编程接口
能自适应内容尺寸
官方网站：http://aui.github.io/artDialog/。
官网文档：http://aui.github.io/artDialog/doc/index.html。
cdn地址：https://www.bootcdn.cn/artDialog/。
2、使用非常简单，参考官网文档即可轻松使用。
// 如果需要支持 iframe 内容与拖拽，请引用加强版 dialog-plus.js
// jquery 最低要求版本为1.7+
<script src="https://cdn.bootcdn.net/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/artDialog/7.0.0/dialog.js"></script>
src/main/resources/static/html/artDialog网页对话框控件.html · 汪少棠/web_app - Gitee.com。
QRCode.js 生成二维码
1、QRCode.js是用于制作 QRCode 的 javascript 库。QRCode.js 支持在 DOM 中使用 HTML5 Canvas 和 table 标签进行跨浏览器。 QRCode.js没有依赖关系。
2、官网：https://github.com/davidshimjs/qrcodejs。
<body>
<a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrCodejs官网：https://github.com/davidshimjs/qrcodejs</a>
<br/><br/>
<div id="qrCode"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">
/**
* 生成二维码
* @param {*} text ：需要生成的文本内容
*/
function createQrCode(text) {
const ele = document.getElementById('qrCode');
let qrCode = new QRCode(ele,//在哪里生成二维码
{
width: 200, //二维码宽度
height: 200, //二维码高度
colorDark: '#000000', //二维码颜色
colorLight: '#ffffff', //二维码前景色
correctLevel: QRCode.CorrectLevel.H, //二维码精度
text: text//需要生成二维码的文本
});
// qrcode.clear(); // clear the code.
// qrcode.makeCode("http://naver.com"); // make another code.
}
createQrCode("https://wangmaoxiong.blog.csdn.net/");
</script>src/main/resources/static/qrCode.html · 汪少棠/web_app - Gitee.com。
LogicFlow 流程图编辑框架
1、LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
- 可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
- 高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
- 自执行引擎：执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。
2、官网：https://site.logic-flow.cn/。
tesseract.js OCR 识别图片文字
1、Tesseract.js 是流行的 Tesseract OCR 引擎的纯 Javascript 端口。该库支持 100 多种语言、自动文本方向和脚本检测、用于阅读段落、单词和字符边界框的简单界面。
2、Tesseract.js可以在浏览器中运行，也可以在具有 NodeJS 的服务器上运行。
3、在识别图片文字，根据搜索过滤图片等这些需求的时候，可以使用 tesseract.js 这个库。
官网：http://tesseract.projectnaptha.com/。
开源地址：https://github.com/naptha/tesseract.js#tesseractjs。
Day.js 日期时间工具库
1、Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js。
官网：https://dayjs.fenxianglu.cn/。
2、日期格式化
dayjs().format(); // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD'); // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss'); // 2011-10-17 00:17:56
CryptoJS 加密工具库
1、前端加密工具库中当之无愧的佼佼者，内置各种加解密算法，一般用来对密码、缓存等敏感信息进行加解密。
文档：https://cryptojs.gitbook.io/docs。
JS下载：https://www.bootcdn.cn/crypto-js/。
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.2.0/crypto-js.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>-->
<script type="text/javascript">
console.log("MD5 加密=" + CryptoJS.MD5("1234567891234567"));
console.log("SHA1 加密=" + CryptoJS.SHA1("1234567891234567"));
console.log("SHA256 加密=" + CryptoJS.SHA256("1234567891234567"));
console.log("SHA512 加密=" + CryptoJS.SHA512("1234567891234567"));
</script>localForage.JS 离线存储方案
1、localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。
2、localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。
3、localforage 的操作都是异步的，这样做的好处是可以降低代码执行阻塞的风险，用起来非常方便，因为它提供了一系列的 API ，比如增加、修改、删除、查找等等。
4、离线的意思是即使关了浏览器，关了电脑，后续再次打开网址时数据仍然还在。
官网文档：http://localforage.docschina.org/#。
JS下载：https://www.bootcdn.cn/localforage/。
src/main/resources/static/localforage.html · 汪少棠/web_app - Gitee.com。
X-Spreadsheet 轻量级 Excel 表格开发库
1、X-Spreadsheet 是一个基于 Web(es6) canvas 构建的轻量级 Excel 表格开发库，在网页上也能享受到Excel般的操作体验。
2、基础功能：撤销重做、添加行列、删除行列、隐藏行列、动态调整行列功能、冻结行列、添加边框/颜色/边框线条样式、合并单元格、复制、粘贴、打印、公式、筛选、自动填充、多表支持、字体样式、自定义字体/大小/颜色、填充前景色/背景色、格式校验、对齐方式、文字换行。
官方文档：https://hondrytravis.com/x-spreadsheet-doc/guide/。
项目地址：https://github.com/myliang/x-spreadsheet。
快速入门：src/main/resources/static/webExcel.html · 汪少棠/web_app - Gitee.com。
mousetrap 处理键盘快捷键的简单库
1、Mousetrap 是一个轻量级的 JavaScript 库，专门用于处理键盘快捷键。允许开发者在应用中绑定和管理快捷键，支持单个按键、组合按键、按键序列以及自定义快捷键，不局限于 keydown 事件，允许指定 keypress、keydown、keyup 或由 Mousetrap 自动选择。。
2、Mousetrap 支持多种浏览器，包括IE8+、Firefox、Chrome、Safari 等，并且兼容移动端的触摸事件。Mousetrap 非常的小压缩后仅有 4.5kb，没有任何外部依赖。
3、可直接绑定特殊键如 ? 或 * 而不必指定 shift+/ 或 shift+8，后者在不同键盘上不一致。
4、支持国际键盘布局；支持 Gmail 风格的键序列以及常规键与组合键；提供 trigger() 方法以程序方式触发键事件；支持键盘上的数字小键盘。
5、Mousetrap 提供了 .bind() 和 .bindGlobal() 方法来绑定快捷键，前者限制在特定元素上触发，后者则在整个文档范围内有效。
开源地址：https://github.com/ccampbell/mousetrap。
cdn：https://www.bootcdn.cn/mousetrap/。
<script src="https://cdn.bootcdn.net/ajax/libs/mousetrap/1.6.5/mousetrap.js"></script>
src/main/resources/static/mousetrapTest.html · 汪少棠/web_app - Gitee.com。
Typed.js 动态文本效果-打字机
1、Typed.js是一个用于创建动态文本效果的 JavaScript 库，广泛用于增强网站用户界面的互动性。页面看起来就是用户在自己手动输入内容一样。Typed.js 适用于多种场景，包括但不限于：
1. 首页引导：为网站首页添加动态文本，吸引用户注意并传达关键信息。
2. 宣传标语：在产品页面或广告中使用动态文字来增强信息的吸引力。
3. 教育网站：在教程或课程页面中使用打字效果来演示代码或步骤。
4. 互动游戏：在游戏中显示动态对话或提示，增加互动体验。
5. 个人博客：为个人博客或作品集页面添加个性化的动态文本效果。
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js"></script>
src/main/resources/static/html/Typed动态文本.html · 汪少棠/web_app - Gitee.com。
Socket.IO 实时通信
1、Socket.IO 是一个用于实时Web应用程序的JavaScript库，可在客户端和服务器之间实现低延迟、双向和基于事件的通信。
2、关键特性
-
实时通信：客户端和服务器之间的双向通信。
-
跨浏览器：在不同浏览器和平台上工作。
-
自动重连：如果连接丢失，自动处理重新连接。
3、Socket.IO 连接可以通过不同的底层传输建立：HTTP 长轮询、WebSocket、WebTransport。Socket.IO 将自动选择最佳可用选项，具体取决于：浏览器的功能、网络（某些网络阻止 WebSocket 和/或 WebTransport 连接）
4、Socket.IO 不是 WebSocket 实现。尽管 Socket.IO 确实在可能的情况下使用 WebSocket 进行传输，但它会向每个数据包添加额外的元数据。这就是为什么 WebSocket 客户端将无法成功连接到 Socket.IO 服务器，并且 Socket.IO 客户端也将无法连接到普通 WebSocket 服务器。
英文官网：https://socket.io/docs/v4/。
Socket.IO 中文网：https://socket.nodejs.cn/。
Socket.IO 中文网新手入门：https://socket.nodejs.cn/docs/v4/tutorial/introduction。
w3cschool 教程：https://www.w3cschool.cn/socket/socket-1olq2egc.html。
扫一扫
3384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
