需要安装jszip，file-saver。俩个npm包
    示例：
    const imgsArr =
    ‘http://imgs.jddmoto.com/carport/goods/4/1584086033256.jpeg!official300?_1242_1242’,
    ‘[http://imgs.jddmoto.com/carport/goods/4/1584086042913.jpeg!official300?_640_395‘]
    pictureDownload(imgsArr)

    1. import JSZip from 'jszip'
    2. import FileSaver from 'file-saver'
    3. // that就是this
    4. import that from '@/main.js's
    7. export function pictureDownload(data) {
    8.   that.$message.success('正在下载...')
    9.   download(data)
    10. }
    12. async function download(data) {
    13.   try {
    14.     let zip = new JSZip()
    15.     for (let i = 0; i < data.length; i++) {
    16.       let lst = data[i].split('.')
    17.       let fileType = lst[lst.length - 1]
    18.       let fileName = data[i].split('.').reverse()[1].split('/').reverse()[0]
    19.       let fileFormat = data[i].split('.').reverse()[0].split('!')[0]
    20.       if (fileType.toLocaleUpperCase() === 'PDF') {
    21.         await getFile(data[i]).then(pdf => {
    22.           zip.file('HaLuo.pdf', pdf, {
    23.             binary: true
    24.           })
    25.         })
    26.       } else {
    27.         await getBase64Image(data[i]).then(res => {
    28.           zip.file(fileName + `.${fileFormat}`, res, {
    29.             base64: true
    30.           })
    31.         })
    32.       }
    33.     }
    34.     downImg(zip)
    35.   } catch (err) {
    36.     console.log('err', err)
    37.   }
    38. }
    39. function downImg(zip) {
    40.   zip
    41.     .generateAsync({
    42.       type: 'blob'
    43.     })
    44.     .then(content => {
    45.       let fileName = '批量下载.zip'
    46.       FileSaver.saveAs(content, fileName)
    47.     })
    48. }
    50. //****传入图片链接，返回base64数据
    51. function getBase64Image(url) {
    52.   return new Promise((resolve, reject) => {
    53.     var base64 = ''
    54.     var img = new Image()
    55.     img.useCORS = true; // 解决跨域
    56.     img.setAttribute('crossOrigin', 'Anonymous') // 解决跨域
    57.     img.onload = () => {
    58.       base64 = image2Base64(img)
    59.       resolve(base64.split(',')[1])
    60.     }
    61.     img.onerror = () => reject('加载失败')
    62.     // 这里可能会有跨域失败的问题，解决方案同上，url + 随机数
    63.     img.src = url + '?=' + Math.random()
    64.   })
    65. }
    66. function image2Base64(img) {
    67.   var canvas = document.createElement('canvas')
    68.   canvas.width = img.width
    69.   canvas.height = img.height
    70.   var ctx = canvas.getContext('2d')
    71.   ctx.drawImage(img, 0, 0, img.width, img.height)
    72.   var dataURL = canvas.toDataURL('image/png')
    73.   return dataURL
    74. }
    75. //****传入文件链接，返回arraybuffer数据
    76. function getFile(url) {
    77.   return new Promise((resolve, reject) => {
    78.     that
    79.       .$http({
    80.         method: 'get',
    81.         url,
    82.         responseType: 'arraybuffer'
    83.       })
    84.       .then(data => {
    85.         resolve(data.data)
    86.       })
    87.       .catch(error => {
    88.         reject('PDF加载失败：' + error)
    89.       })
    90.   })
    91. }