前端下载图片，后端返回url地址，前端处理下载到本地，如果返回多个图片，则下载成压缩包，下载时弹出选择路径，让用户自定义选择保存路径_后端返回url前端进行下载

vue实现图片下载

前端下载图片，后端返回url地址，前端处理下载到本地，如果返回多个图片，则下载成压缩包

自定义保存路径在最下面哦

废话不多说，直接上代码，有不明白的可以私信，有不对的也可以私信

<template>
  <span style="color:RGB(24,144,255); cursor: pointer;" @click="handleTp(record)">{{ getValue(record) }}</span>
</template>

<script>
import JSZip from 'jszip'
import FileSaver from "file-saver"
import axios from 'axios'
export default {
  name: "GxwhList",
  data() {
    return {
      imgArr: [],
      exportLoading: false,
    }
  },
  methods: {
    //单张图片下载方法
    downloadIamge(imgsrc, name) {
      let image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png");
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        a.download = name ? name : "photo";
        a.href = url;
        a.dispatchEvent(event);
      };
      image.src = imgsrc;
    },
    // 多张调用方法
    getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: 'get',
          url: url,
          responseType: 'blob'
        }).then(response => {
          resolve(response.data)
        }).catch(error => {
          reject(error.toString())
        })
      })
    },
    handleTp(record) {
      // 此处返回的url是连在一起的，所以处理成数组字符串
      let pics = record.imgurl.replaceAll("60.165.49.10", "192.168.2.78");
      let picArr = pics.split(",")
      // let picArr=[{name:1,url:'',pName:'',pStep:''}]//只有一条数据
      //此处arr1为测试图片地址，后端返回正确图片url后直接注释掉arr1，并释放下面picArr的for循环中 第一个value同事注释掉第二个value
      var arr1 = [
        "https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
        "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ];
      if (picArr.length <= 0) {//无图片
        return this.$message.warning("无可导出图片");
      } else {//有图片
        console.log("picArr.length:" + picArr.length);
        for (let i = 0; i < picArr.length; i++) {
          // let value = {name:i+1,url:picArr[i],pName:this.title,pStep:record.cname};
          let value = { name: i + 1, url: arr1[i] ? arr1[i] : '', pName: this.title, pStep: record.cname };
          this.imgArr[i] = value;
          console.log("this.imgArr[i]:" + JSON.stringify(value))
        }
        if (this.imgArr.length < 2) {//有且只有一张图片
          //一张图片直接下载
          this.downloadIamge(this.imgArr[0].url, this.imgArr[0].name)
        } else if (this.imgArr.length >= 2) {
          //图片数量>1则下载成压缩包
          this.exportLoading = true
          let zip = new JSZip()
          let _this = this
          let promises = []
          let cache = {}
          let promise
          console.log("2222222222")
          for (let item = 0; item < this.imgArr.length; item++) {
            console.log("55555555555", this.imgArr[item].url);
            promise = this.getFile(this.imgArr[item].url).then(data => { // 下载文件, 并存成ArrayBuffer对象
              console.log("33333333333", data);
              // let file_name = item.realName // 获取文件名
              zip.file(this.imgArr[item].name + '.jpg', data, { binary: true }) // 逐个添加文件，需要加后缀".png"
              cache[this.imgArr[item].name] = data
            })
          }
          promises.push(promise)
          Promise.all(promises).then(() => {
            zip.generateAsync({ type: 'blob' }).then(res => {
              // 生成二进制流
              FileSaver.saveAs(res, this.imgArr[0].pName + this.imgArr[0].pStep) // 利用file-saver保存文件  自定义文件名
              _this.$notification.success({
                message: '文件正在压缩下载，请稍等!'
              })
            })
            _this.exportLoading = false
          }).catch(res => {
            _this.$notification.warning({
              message: '文件下载失败，请刷新页面重新下载!'
            })
            _this.exportLoading = false
          })
        }

      }
    },
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

自定义保存路径

点击下面连接
自定义保存路径