关闭

命令行进度条实现

标签: 命令行进度条Node进度条
6901人阅读 评论(0) 收藏 举报
分类:

对于很多包管理工具而言,拥有一个进度条基本上来说是必备的,可以轻松的让用户知道当前程序的进度。
VSCode命令行进度条美化版
命令行下其实也可以活得很精彩。


今天来学一下如何制作一个命令行下的进度条工具。回想之前用Python写过的getpass2,用了标准输出来实现的。和这次的进度条需求相比,感觉应该是一回事。应该就是清空上次的打印内容,然后write本行数据。

单行输出

果不其然,在网上大致搜了一下,发现很多都是使用类似的思路。那既然如此,就没必要重复造轮子了。干脆用人家的好了。

single-line-log

关于这个模块的使用,可以通过npm进行安装,也可以下载源代码,放到本地使用。其核心代码超少,我就直接贴出代码好了。

/**
 * 单行内容输出效果。
 */
const MOVE_LEFT = new Buffer('1b5b3130303044', 'hex').toString();
const MOVE_UP = new Buffer('1b5b3141', 'hex').toString();
const CLEAR_LINE = new Buffer('1b5b304b', 'hex').toString();

/**
 * 借助一个第三方的计算字符串长度的模块。
 */
const stringwidth = require('string-width');

module.exports = function(stream) {
    var write = stream.write;
    var str;

    stream.write = function(data) {
        if(str && data!== str) str = null;
        return write.apply(this, arguments);
    };

    if(stream === process.stderr || stream === process.stdout) {
        process.on('exit', ()=>{
            if(str!==null) stream.write('');
        });
    }

    var prevLineCount = 0;
    var log = function(){
        str = '';
        var nextstr = Array.prototype.join.call(arguments, ' ');

        // 清屏
        for(var i =0; i < prevLineCount; i++) {
            str += MOVE_LEFT + CLEAR_LINE + (i < prevLineCount-1?MOVE_UP:'');
        }

        // 更新实际内容
        str += nextstr;
        stream.write(str);

        // 下行要删除多少行内容
        var prevLines = nextstr.split('\n');
        prevLineCount = 0;
        for(var i = 0; i < prevLines.length; i++) {
            prevLineCount += Math.ceil(stringwidth(prevLines[i]) / stream.columns) || 1;
        }
    };

    log.clear = function() {
        stream.write('');
    };

    return log;
};

/**
 * 对外提供接口。
 */
module.exports.stdout = module.exports(process.stdout);
module.exports.stderr = module.exports(process.stderr);

是的,就只有这么几行的内容。阅读代码就不难发现,就是我上面说的那个思路。

测试输出

接下来简单的进行测试一下。因为对于小文件来说,的一下就完事了,所以干脆找个大文件,比如一个电影来进行测试。

var log = require('./singleline').stdout;
var fs = require('fs');
var strformat = require('str-format');
var read = 0;
var filepath = "E:\\Video\\电影\\大内密探零零发.mkv";
var size = fs.statSync(filepath).size;

var rs = fs.createReadStream(filepath);
rs.on('data', function(data){
    read += data.length;
    var percentage = Math.floor(100*read/size);
    // log("Writing to super large file\n["+percentage+'%]', read, 'bytes readed.')
    log(strformat.format('Writing to super large file.\n[ {}% ] bytes readed.', [percentage]))
});

里面用到了我之前写的一个Python风格的字符串格式化模块。有需要的可以使用

npm install str-format

来进行安装和使用。

下面来看下运行的效果。
单行输出测试,大电影形式

其实这样就实现了一个简单的进度条了。但是为了使其更加通用,接下来对其进行了一个封装。


progressbar

虽然说是进行了封装, 其实重要的还只是percentage那部分的内容了。

封装代码

/**
 * 进度条实现。
 */
const log = require('./singleline').stdout;
const strformat = require('str-format').format;

/**
 * 封装一个进度条工具。
 */
function ProgressBar(description, bar_length) {
    this.description = description || "PROGRESS";
    this.length = bar_length.length || 28;

    // 刷新进度条图案,文字的方法
    this.render = function(opts) {
        var percentage = (opts.completed/opts.total).toFixed(4);
        var cell_num = Math.floor(percentage * this.length);
        // 拼接黑色条
        var cell = '';
        for(var i = 0; i < cell_num; i++) {
            cell += '█';
        }
        // 拼接灰色条
        var empty = '';
        for(var i = 0; i < this.length - cell_num; i++) {
            empty += '░';
        }
        // 拼接最终文本
        var cmdtext = strformat("<{}:{}%> {}{}  [ {}/{} `{}`]", [this.description, (100*percentage).toFixed(2),
        cell, empty, opts.completed, opts.total, opts.status]);
        log(cmdtext);
    };
}

/**
 * 模块导出。
 */
module.exports = ProgressBar;

测试进度条效果

var ProgressBar = require('./progressbar');
var pb = new ProgressBar('下载进度', 50);
var num = 0, total = 100;
function downloading() {
    if (num < total) {
        pb.render({ completed: num, total: total, status: '下载中...' });
        num++;
        setTimeout(function () {
            downloading();
        }, 50);
    }else{
        pb.render({completed: num, total: total, status: "下载完毕."});
            process.exit(0);
    }
}

downloading()

运行效果,如下:
进度条本地测试

至此,一个还算是比较通用的进度条就算是完成了。每次需要手动更新进度的时候,只需要调用render方法即可。

美化

单纯的黑白字符,看起来挺枯燥的,下面使用一个终端彩色模块来对其进行一下美化。

美化版进度条包装

/**
 * 进度条实现。
 */
const log = require('./singleline').stdout;
const strformat = require('str-format').format;
const clicolor = require('cli-color');

/**
 * 封装一个进度条工具。
 */
function ProgressBar(description, bar_length) {
    this.description = description || "PROGRESS";
    this.length = bar_length.length || 28;

    // 刷新进度条图案,文字的方法
    this.render = function(opts) {
        var percentage = (opts.completed/opts.total).toFixed(4);
        var cell_num = Math.floor(percentage * this.length);
        // 拼接黑色条
        var cell = '';
        for(var i = 0; i < cell_num; i++) {
            cell += '█';
        }
        // 拼接灰色条
        var empty = '';
        for(var i = 0; i < this.length - cell_num; i++) {
            empty += '░';
        }

        var percent = (100*percentage).toFixed(2);
        /**
         * 使用cli-color进行包装美化。
         */
        this.description = clicolor.blue.bold(this.description);
        cell = clicolor.green.bgBlack.bold(cell);
        opts.completed = clicolor.yellow.bold(opts.completed);
        opts.total = clicolor.blue.bold(opts.total);
        opts.status = percent==100.00?clicolor.green.bold(opts.status):clicolor.red.bold(opts.status);


        // 拼接最终文本
        var cmdtext = strformat("<{}:{}%> {}{}  [ {}/{} `{}`]", [this.description, percent,
        cell, empty, opts.completed, opts.total, opts.status]);
        log(cmdtext);
    };
}

/**
 * 模块导出。
 */
module.exports = ProgressBar;

美化版进度条测试

var ProgressBar = require('./progressbar');
var pb = new ProgressBar('下载进度', 72);
var num = 0, total = 100;
function downloading() {
    if (num < total) {
        pb.render({ completed: num, total: total, status: '下载中...' });
        num++;
        setTimeout(function () {
            downloading();
        }, 20);
    }else{
        pb.render({completed: num, total: total, status: "下载完毕."});
            process.exit(0);
    }
}

downloading()

下面看下执行结果。

  • 先看下在VSCode下的执行效果。
    VSCode命令行进度条美化版

  • 然后是常规的CMD命令行下效果。
    常规CMD命令行进度条美化版


好了,大致就是这么个内容了。在Linux上还有很多更加优秀的此类实现。有机会再去借鉴借鉴好了。

6
0
查看评论

程序进度条的实现

进度条
  • SmartBrave
  • SmartBrave
  • 2015-05-17 00:03
  • 882

命令行显示的简易进度条

<br />测试。。。<br /> <br />进度条类:<br />package com.test; public class ProcessBar { /** * 显示一个进度条 */ private static...
  • isea533
  • isea533
  • 2011-05-13 11:57
  • 2792

2017-03-01-为你的Github生成漂亮的徽章和进度条

为你的Github README生成漂亮的徽章和进度条
  • frank_0007
  • frank_0007
  • 2017-04-25 10:50
  • 643

Markdown 语法说明 (简体中文版)

概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 Blockquotes 列表 代码区块 分隔线 区段元素 链接 强调 代码 图片 其它 自动链接 反斜杠 概述宗旨Markdown 的目标是实现「易读易写」。可读性,无论如何,都是最重要的。一份使用 Markdow...
  • qq_20044689
  • qq_20044689
  • 2016-08-05 11:45
  • 411

用node.js实现多文件上传并携带进度条的demo - express

利用express实现多文件上传的小demo,内部已经含有携带进度条的前端demo了,http请求是我自己封装的,如果各位使用的是jq、fetch等其他插件,请自行看文档寻找 xhr.onload.progress 这个原生的回调函数。
  • yolo0927
  • yolo0927
  • 2017-11-13 18:02
  • 358

实现Linux下带进度显示的cp命令 - xcp

实现Linux下带进度显示的cp命令 - xcp 作者:阙荣文 - Q++ Studio Linux下复制文件的命令cp非常强大,就是有一点不是很好:没有进度提示。尤其是在复制很多大文件时,控制台仅仅停在那里什么信息都没有让人非常不爽。 当然可以通过shell脚本实...
  • dl0914791011
  • dl0914791011
  • 2014-04-10 18:14
  • 28800

BASH Shell 简易进度条小函数

不多说,直接上脚本。 # processbar processbar() { local current=$1; local total=$2; local maxlen=80; local barlen=66; local perclen=14; local format=&qu...
  • wxqee
  • wxqee
  • 2014-08-01 10:16
  • 4393

6 款绚丽的 JS 加载和进度条插件

随着我们网站复杂度的增加,很多时候需要用户去等待一些比较耗时的操作,在等待的过程中,如果能有一些比较人性化的加载动画或者进度条提示用户当前执行的状态,那就能大大提升网站的用户体验度。下面给大家分享一些绚丽的JS动画加载和进度条插件,希望大家喜欢。  1、Spin.js  ...
  • pengpegV5yaya
  • pengpegV5yaya
  • 2013-11-29 13:39
  • 2963

在终端下面显示一个进度条

1 #!/bin/bash 2 3 # progressbar.sh 4 # print a progress bar 5 # 6 # Author: Jerry Fleming 7 8 function progress() 9 {10 CHARS=|/-/11 ...
  • jerryfleming
  • jerryfleming
  • 2006-10-13 16:22
  • 1149

在 linux 的命令行输出进度条

linux 有些个命令比如 wget 会显示一个进度条。终于知道了一个办法弄出这个效果。其实也很简单:for ($i = 0; $i   printf("progress: [%-50s] %d%%/r", str_repeat(#,$i), $i * 2); ...
  • phphot
  • phphot
  • 2009-03-03 01:21
  • 1975
    个人资料
    • 访问:3235732次
    • 积分:34857
    • 等级:
    • 排名:第149名
    • 原创:357篇
    • 转载:35篇
    • 译文:9篇
    • 评论:733条
    友情链接
    我的偶像
    个人主页
      GitHub
    放松一下
    博客专栏
    最新评论
    版权信息
    去除本页广告
    图片炸弹装填中...

        
    [img=赞一个]http://bpic.588ku.com/element_origin_min_pic/16/12/12/0d96da96cf36505736c09d63832eaac8.jpg[/img]