a标签下载图片，防止预览

为了让 <a> 标签链接的图片直接下载而不是在浏览器中预览，可以使用 HTML5 中的 download 属性。以下是如何使用 download 属性来实现图片下载：

<a href="image-url.jpg" download>
  点击下载图片
</a>

上述代码会让浏览器尝试下载指定链接的图片文件，而不是在当前页面打开预览。但是，这个方法有几个注意事项：

1. 同源策略限制：download 属性仅适用于同源资源。如果图片资源来自于另一个域名，现代浏览器出于安全原因可能会阻止直接下载，而是打开图片预览。
2. 兼容性：不是所有浏览器都支持 download 属性。对于不支持此属性的浏览器，链接仍然可能导致图片在新窗口或当前窗口中打开预览。
3. 非标准 MIME 类型：某些情况下，即使资源是图片，但如果服务器返回的MIME类型不是标准的图片类型（如 "image/jpeg"、"image/png" 等），浏览器也可能不会触发下载行为。

解决方案

1. 通过图片的url地址请求获得图片的Blob(二进制大对象)数据
2. 通过URL.createObjectURL(fileBlob)将Blob转成同源的url图片地址
3. 创建a标签并通过download属性下载图片

  downloadFn(item) {
      const xhr = new XMLHttpRequest();
      // link是图片的url地址
      xhr.open('GET', item.fullPath)  //url 地址
      xhr.responseType = 'blob'
      xhr.send()
      xhr.onload = function () {
        const fileBlob = xhr.response;
        // 获取到了图片的Blob数据
        console.log(fileBlob)
        const url = window.URL.createObjectURL(fileBlob) //URL.createObjectURL(object)表示生成一个File对象或Blob对象
        let dom = document.createElement('a') 
        dom.style.display = 'none'
        dom.href = url
        dom.setAttribute('download', item.originalFilename) //指示浏览器下载url和文件名
        document.body.appendChild(dom)
        dom.click()
      }
    },