前端常用 JavaScript 插件汇总、前端排序

蚩尤后裔-汪茂雄

已于 2024-03-21 16:59:48 修改

阅读量3.8k

点赞数

分类专栏： Html 5 JavaScript 文章标签： javascript 前端开发语言

于 2018-11-06 15:10:56 首次发布

本文链接：https://blog.csdn.net/wangmx1993328/article/details/83787321

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Html 5

13 篇文章 0 订阅

订阅专栏

download.js 文件下载

经典、优雅网页对话框控件 —artDialog

qrcodejs 生成二维码

前端十大排序

download.js 文件下载

1、download() 函数用于触发从JavaScript下载文件。它指定放置在浏览器下载目录中的新文件的内容和名称。输入可以是数据的URL、String、Blob或Typed Array，也可以通过将文件数据表示为base64或URL编码字符串的dataURL。无论输入格式如何，download（）都使用指定的文件名和mime信息保存文件，保存方式与服务器使用Content Disposition HTTP头相同。

2、download.js 是各种下载方式的集大成者(推荐使用)，获取来源：

Github 地址：GitHub - rndme/download: file downloading using client-side javascript

CDN 库：downloadjs (v1.4.8) - file downloading using client-side javascript | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

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=http%3A%2F%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

artDialog —— 经典、优雅的网页对话框控件。

支持普通与 12 方向气泡状对话框

完善的焦点处理，自动焦点附加与回退

支持 ARIA 标准

面向未来：基于 HTML5 Dialog 的 API

支持标准与模态对话框

丰富且友好的编程接口

能自适应内容尺寸

官方网站：artDialog | 经典的网页对话框组件。

官网文档：artDialog。

cdn地址：artDialog (v7.0.0) - classical web dialog module which perfectly crafted from inside to outside | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务。


// 如果需要支持 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>

使用非常简单，参考官网文档即可轻松使用。


<body>
<button type="button" id="dialogButton">弹框</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialogButton").on("click", function () {
            let dialogObj = dialog({
                title: '欢迎',
                content: '欢迎使用 artDialog 对话框组件！',
                okValue: '确定',
                // quickClose: true,
                ok: function () {
                    this.title('提交中…');
                },
                cancelValue: '取消',
                cancel: function () {
                }
            });
            // dialogObj.show();
            dialogObj.showModal();
            // 对话框将在指定毫秒后自动关闭(dom元素会全部移除掉)
            setTimeout(function () {
                dialogObj.close().remove();
            }, 3000);
        });
    });
</script>

qrcodejs 生成二维码

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。

前端十大排序

演示源码：src/main/resources/static/frontEndSorting.html · 汪少棠/web_app - Gitee.com

蚩尤后裔-汪茂雄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端常用 JavaScript 插件汇总、前端排序

很多时候 web 网页上需要判断或监听浏览器(系统)的网络状态。Navigator onLine 属性onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。注：在 IE 4+ 中，用户可以在浏览器中选择脱机工作，当脱机工作被选后，系统就进入了脱机状态，内容将从缓存进行读取。语法：navigator.onLin...
复制链接

扫一扫