前端实现图片下载

前端实现图片下载

在这里我们需要一个插件 html2canvas 下载它

npm install --save html2canvas

在需要的页面引入

import html2canvas from "html2canvas"

我这里使用的是需要下载多个的，但是我没有找到怎么直接下载多个，然后，我就直接使用了递归一个下载完了之后下载下一个，直到下载完成，我在图片上传到阿里云，图片超过1的时候也是这样操作的。
但是这个东西需要使用到ref , 这里其实有点坑， ref 我有试过，给出变量赋值，但是这个在下面的时候是没有用的，它就只能死了，如果有同学知道怎么动态赋值，然后还能引用的话，请务必说一下， 让我学习一下，谢谢。

上文说了，我这里的都是不能动态赋值的，如果按照这个来打印的话，可能就是把所有的都打印了，这个时候我们选择的时候就很有必要知道这个的下标了。
下面看代码吧。
list 就是选中的需要打印的文件

computed: {
    sign() {
        let sign = []
        for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].checked) {
                sign.push(i)
            }
        }
        console.log('sign', sign)
        return sign
    }
},
clickGeneratePicture(i) {
    console.log('this.$refs.imageDom', this.$refs.imageDom)
    let img = this.$refs.imageDom
    setTimeout(() => {
        html2canvas(this.$refs.imageDom[i], {
            useCORS: true, //允许图片跨域
        }).then(canvas => {
            // 转成图片，生成图片地址
            this.imgUrl = canvas.toDataURL("image/png");
            if (this.imgUrl) {
                console.log('this.imgUrl', this.imgUrl)
                var eleLink = document.createElement("a");
                eleLink.href = this.imgUrl; // 转换后的图片地址
                eleLink.download = "pictureName";
                // 触发点击
                document.body.appendChild(eleLink);
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
                this.currindex ++
                if (this.currindex <= this.sign.length-1) {
                    this.clickGeneratePicture(this.sign[this.currindex])
                } else {
                    this.resetBox = false
                    for (const item of this.list) {
                        item.checked = false
                    }
                }
            }
        })
    }, 500)
},
printSelect() {
    if (!this.resetBox) {
        this.$message.error('请点击选择之后，勾选卡片内部的框之后在点击打印选中')
        return
    }
    console.log('this.sign', this.sign)
    if (this.sign.length > 0) {
        this.clickGeneratePicture(this.sign[this.currindex])
    } else {
        this.$message.error('请勾选卡片内部的框之后在点击打印选中')
        return
    }
},

对了，如果你需要打印的东西是不显示出来的，千万不要用display: none; 和 opacity: 0; 用上这个之后他获取到的就是空白的东西了，实在要用的话，就按照我下面写的写吧。

top: -1000px;
left: 0;
z-index: -1;
position: fixed;

这样也是看不见，但是可以打印出来。