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

一：多文件下载并压缩成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()这个方法就可以实现啦