纯前端就可以实现的两个需求

一：多文件下载并压缩成zip形式

  我们一般看到这个需求，大多前端都会觉得这不就是一个接口的事嘛，咱们直接window.open（）就搞定了，emm...，我之前也是这样想的，可惜现在是在三线城市的小互联网公司，人家后端说服务器不行，带宽不够，出不来接口0.0，所以我就尝试着寻找……最终找到了解决办法——

  前端可以直接从cos资源服务器中下载多个文件，并放进压缩包中哦，这样就省去了后端在中间中转的那个环节，实现方式如下：

1.安装依赖

  我们需要用到两个第三方依赖哦，分别执行以下安装

npm i jszip
npm i file-saver

2.引入 

  在需要使用的时候，我们引入

import JSZip from "jszip";
import FileSaver from "file-saver";

3.实现过程

  我这里是在vue框架中，所以方法是在methods中哦，先在data里声明一个文件demo数据

data () {
    return {
        fileList: [  //这里的数据 实际中 应该是从后端接口中get        {          name: "test1.doc",          url: "https://collaboration-pat-1253575580.cos.ap-shenzhen-fsi.myqcloud.com/baseFile/202303/bdf4303f-4e8d-4d95-977c-4fd5ef28d354/new.doc"        },        {          name: "test2.doc",          url:"https://collaboration-pat-1253575580.cos.ap-shenzhen-fsi.myqcloud.com/baseFile/202303/bdf4303f-4e8d-4d95-977c-4fd5ef28d354/new.doc"        }      ],
    } 
}

methods中的方法：

handleClickDownAll () { //实现多文件压缩包下载
    let _this = this
    let zip = new JSZip()
    let cache = {}
    let promises = []
    for(let item of this.fileList) {
        const promise = _this.getFileArrBuffer(item.url).then(res => {
            //下载文件, 并存成ArrayBuffer对象(blob)
            zip.file(item.name,res,{binary:true}) //逐个添加文件
            cache[item.name] = data
        })
        promises.push(promise)    }
    Promese.all(promises).then(() => {
        zip.generateAsync({type:'blob'}).then(content => {
             FileSaver.saveAs(content,"压缩包名字")  //利用file-saver保存文件  自定义文件名
        })
    })
},
getFileArrBuffer(url) {
    return new Promise((resolve) => {
        let xmlhttp = new XMLHttpRequest()
        xmlhttp.open('GET',url,true)
        xmlhttp.responseType = 'blob'
        xml.onload = function () {
            resolve(this.response)
        }
        xmlhttp.send()
    })
}

二：electron-vue中，生成二维码，并支持复制二维码图片

要实现的功能如下，就是点击这个“复制二维码”，可以直接把二维码图片复制下来

1.安装依赖

npm i qrcodejs2

2.引入

import QRCode from 'qrcodejs2';
import { clipboard, nativeImage} = require('electron')

3.实现

  要先在template中写一个这样的元素，用来显示二维码图片框

<div id="qrcodeImg" class="qrcode" style="height: 120px"></div>

然后再写一个画二维码的方法，如下：

drawQrcode() {
    new QRCode("qrcodeImg",{
        width:120,
        height:120,
        text:"http://www.baidu.com",
        colorDark:"#000",
        colorLight:"#fff"
    })
}

复制二维码的方法如下:

copyCode() {
    let src = document.getElementById("qrcodeImg").getElementsByTagName("img")[0].src
    const image = nativeImage.createFromDataURL(src)
    clipboard.writeImage(image)
    this.$Message.success('复制成功')
}

4.使用

要先确保dom元素已经有了，所以在mounted中调用drawQrcode()这个方法，然后点击“复制二维码”时，调用 copyCode()这个方法就可以实现啦