vue 文件下载

废话不多说直接上才艺

1.

 首先你得获取到文件名称和路径如上图

2.

 通过点击事件吧路径和名字传给方法

3.

  然后接收一下打印出来你就得到第一张图片的结果啦

 4. 重点来了

   file_download(e) {
      // 实例化一个img对象
      const img = new Image()
      // 设置img的图片路径
      img.src = e.path
      // 设置跨域解决
      img.setAttribute('crossOrigin', 'Anonymous')
      // img加载完后处理
      img.onload = function() {
        // 创建一个canvas对象
        const canvas = document.createElement('canvas')
        // 把图片的宽度设为canves的宽度
        canvas.width = img.width
        // 把图片的高度设为canves的高度
        canvas.height = img.height
        // 创建一个2d画布
        const ctx = canvas.getContext('2d')
        // 将img中的内容画到画布上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        // 将画布内容转换为Blob
        canvas.toBlob((blob) => {
          // blob转为同源url
          const blobUrl = window.URL.createObjectURL(blob)
          // 创建a链接
          const a = document.createElement('a')
          a.href = blobUrl
          // 这里download是控制文件名称的我这里是动态的也可以这样写a.download = 'xxx'这个是固定的名字
          a.download = e.name 
          // 触发a链接点击事件，浏览器开始下载文件
          a.click()
        })
      }
    },

5.

 然后点击就可以下载了