Electron 客户端下载进度条

一:整体流程步骤:
1. 通用的进度条的相关代码,写在项目中;
2. 正常 Electron 打包成绿色版;
3. 选用打包工具并打包,安装 Inno Setup Compiler 软件,绿色版的 软件 打包成安装版;
4.Inno Setup 的常见使用方法:
地址:https://www.cnblogs.com/happyamyhope/p/7486039.htmlhttps://blog.csdn.net/u011562187/article/details/70160443

二:详细代码实现:
1. 获取服务器下 Mestar_Home 文件夹中是否存在新的版本,存在即打开下载;
image.png

image.png

2. 引入 Axios 并使用 : Vue 中 importAxios from ‘axios’ 后 可直接调用,本段即为 进度条的主要代码;
image.png
1)利用 Axios 的 get 请求调用前面拼接的下载地址,将程序下载成 blob 类型的对象;

2)再利用 js 生成原生 a 标签,将程序绑到 a 标签上,模拟自动点击 a 标签将文件另存为本地文件,这个利用到了原生 a 标签的 download 的特性。

3)在文件的下载过程中,Axios 自带一个 onDownloadProgress 事件,可以监听下载的进度百分比,并将这个百分比传给我们的前端框架 museui 封装的进度条控件,实现进度条的实时刷新。
4)* 注:axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端,感兴趣的话可自行百度查阅一下资料。

  1. 由于我们的客户端程序在完成开发后是利用 electron 进行打包的,eletron 支持在配置文件中直接进行配置即可使程序全局允许跨域,具体配置过程为,在 main.js 中 BrowserWindow 对象中添加属性 webSecurity: false
    image.png

三:具体代码:
1)查找是否有新版本:
checkUpdateNew() {// 检测程序版本
      let myVersion = this.$root.api.api.fileVersion;
      let fileName = this.$root.api.api.fileName;
      let fileType = this.$root.api.api.fileType;
      let that = this;
      let data = qs.stringify({ ver: myVersion, fileName: fileName, fileType: fileType });
      business.post({
          url: “productPadCommController!getAppVerNew.m”,
          data: data
        }).then(res => {
          if (res.status == 200 && res.data.type == “success”) {
            let fs = this.$root.api.api.require(“fs”);
            let reslut = res.data.data.split(“:”);
            if (reslut[0] == “S”) {
              let network = Storage.getObject(“network”);
              let selectedIndex = Storage.getObject(“selectedIndex”);
              network = network[selectedIndex];
              var downloadUrl = `http://${network.ip}:${network.port}/${
                network.appName

              }/ext/download/${fileName}_${reslut[1]}.${fileType}`;
              console.log(downloadUrl);
              let serverVersion = Number(reslut[1].replace(/./g, ""));
              let thisVersion = Number(myVersion.replace(/./g, ""));
              if (serverVersion != thisVersion) {
                Message.confirm(“检测到程序更新, 版本号:” + reslut[1],this.$i18n.t(‘base.prompt’), {
                  type: “warning”
                }).then(res => {
                  if (!res.result) {
                    return false;
                  }
                  this.updateUrl = downloadUrl;
                  this.openDownloadDialog = true;
                });
              } else if (serverVersion == thisVersion) {
                // 您当前版本已是最新版本, 无需更新!
                console.log(this.$i18n.t(‘message.message_mine_lastappversion’));
  }
            } else {
              console.log(reslut[1]);
            }
          }
        }).catch( err => {
          console.log(JSON.stringify(err));
        });
    },

    downloadFile(downloadUrl){// 下载文件
        let link = document.createElement(‘a’)
        link.style.display = ‘none’
        link.href = downloadUrl;
        document.body.appendChild(link);
        link.click()
        window.URL.revokeObjectURL(url);
        // 用完即删
        document.body.removeChild(link);
    },
    downLoadEnd(flag, url){// 下载更新完成事件
      this.updateUrl = "";
      this.openDownloadDialog = false;
      if(flag && flag == “error”) this.downloadFile(url);// 有问题走原下载逻辑
    }
  },
2)进度条代码:
methods: {
      downLoadFile(url){
          let self = this;
          return new Promise((resolve, reject) => {
            Axios({
                method: ‘get’,
                url: url,
            data : ‘‘,
                responseType: ‘blob’,
                onDownloadProgress: function (a) {
                    // 对原生进度事件的处理
                    var percent = parseInt(100 * (a.loaded / a.total));
                    self.$nextTick(() => {
                        self.linear = percent;
                    });
                }
            }).then((response) => {
                if(response){
                    setTimeout(() => {
                        self.$emit(‘downLoadEnd’);// 下载完成关闭下载页面
                        const blob = new Blob([response.data]);
                        if (‘download’ in document.createElement(‘a’)) { // 非 IE 下载
                            const link = document.createElement(‘a’);
                            link.style.display = ‘none’;
                            link.href = window.URL.createObjectURL(blob);
                            link.download = url.split(’/’).pop();
                            document.body.appendChild(link);
                            link.click();
                            window.URL.revokeObjectURL(link.href);// 释放 URL 对象
                            document.body.removeChild(link)
                        } else { // IE10+ 下载
                            navigator.msSaveBlob(blob)
                        }
                        resolve(response);
                    },1000);
                }else{
                    self.$emit(‘downLoadEnd’, ‘error’, url);
                    console.log(“下载异常!”);
                }
            }).catch((err) => {
                self.$emit(‘downLoadEnd’, ‘error’, url);
                console.log(“下载异常!”);
                reject(err);
            })
        })
      }
  },
  computed: {},
  watch: {},
  mounted() {
      this.downLoadFile(this.url);
  }
};