前端 浏览器 下载图片，pdf等文件，而不是直接打开文件

首先分为几种情况

1. 同源--------------------(可以下载)
2. 非同源不跨域-----------(可以下载)
3. 非同源跨域--------( 不可以)

至于上面结论是否正确，我也不敢保证哈哈

同源

1. 这个一般比较简单，唯一注意的是 要在和图片地址一样的域名下测试

handleDownloadFile(val) {
      let aEl = document.createElement("a");
      document.body.appendChild(aEl);
      aEl.rel = "noopener";
      aEl.href = `${val.downloadUrl}?name=${val.file_name}.${val.extension}`
      aEl.download = `${val.file_name}.${val.extension}`
      aEl.click();
      setTimeout(() => {
        document.body.removeChild(aEl);
      }, 0);
    },

2. 其实有时候就是想本地测试，那可以参考下面的 非同源不跨域

非同源不跨域

是指 文件和当前网站不是同一源；但是图片地址后端解决了跨域问题（注意是后端解决了跨域问题）

这个推荐直接用FileSaver.js,具体可以看文档FileSaver.js

import { saveAs } from 'file-saver';

saveAs(url, `${name}.pdf`);

非同源跨域

这个我目前到没试过，好像不行