＜a＞标签下载download 浏览器打开文件或者下载文件的区别

用户点击下载多媒体文件(图片/视频等)，最简单的方式：

<a href='url' download="filename.ext">下载</a>

如果url指向同源资源，是正常的。

如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。

解决方案一：将文件打包为.zip/.rar等浏览器不能打开的文件下载。

解决方案二：通过后端转发，后端请求第三方资源，返回给前端，前端使用file-saver等工具保存文件。

如果url指向的第三方资源配置了CORS，download依然无效，但可以通过xhr请求获取文件，然后下载到本地。

浏览器已经限制死跨域下载多媒体文件的各种方式。

/**
 * 用FileSave保存文件
 * @param url
 */
export function downloadUrlFile(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 获取图片blob数据并保存
      saveAs(xhr.response, 'abc.jpg');
    }
  };
 
  xhr.send();
}
 
/**
 * URL方式保存文件到本地
 * @param name 文件名
 * @param data 文件的数据
 */
function save(name, data) {
	var urlObject = window.URL || window.webkitURL || window;
	var export_blob = new Blob([data]);
	var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
	save_link.href = urlObject.createObjectURL(export_blob);
	save_link.download = name;
	_fakeClick(save_link);
}

项目中使用a标签render为下载链接
在let loc = window.location.origin // 当前网址和端口号 本地调试时可以下载
在本地开前端然后链接到项目服务器let loc = 'http://10.102.32.72:8080' , 跨域访问时就变为浏览器打开文件

	tableColumns: [
        {title: '应用名称', key: 'name'},
        {title: '图名称', key: 'graphName'},
        {title: '用户名', key: 'username'},
        {
          title: '执行状态',
          key: 'appStatus',
          render: (h, params) => {
            const row = params.row
            const text = this.getDescriptionByStatus(row.appStatus)
            const color = ['PENDING', 'RUNNING', 'CONFIGURING', 'COMPLETING'].indexOf(row.appStatus) !== -1 ? 'success' : 'warning'
            return h('Tag', {
              props: {
                type: 'dot',
                color: color
              }
            }, text)
          }
        },
        {title: '更新时间', key: 'updateTime'},
        {
          title: '数据文件',
          key: 'dataFile',
          render: (h, params) => {
            let loc = window.location.origin // 当前网址和端口号
            // let loc = 'http://10.102.32.72:8080'
            // console.log(loc)
            let dataUrlPre = loc + '/' + params.row.username + '/app_result/' + params.row.id
            let dataFiles = Object.keys(params.row.appResultVOMap) // 获取到所有的数据文件名称 ["test.json", "test2.json", "test3.txt"]
            console.log('dataFiles=', dataFiles)
            if (dataFiles.length) {
              return h('ul', dataFiles.map(function (item) {
                let text = ''
                if (item.indexOf('.json') !== -1) {
                  text = item.split('.json')[0]
                } else {
                  text = item.split('.txt')[0]
                }
                let urlDown = dataUrlPre + '/' + text + '/' + item
                console.log('urlDown=', urlDown)
                return h('li', [
                  h('a', {
                    domProps: {
                      href: urlDown,
                      download: item,
                      target: '_black'
                    },
                    style: {
                      marginBottom: '5px',
                      marginTop: '5px',
                      display: 'inline-block',
                      borderBottom: 'solid 1px blue'
                    }
                  }, item)
                ])
              }))
            } else {
              return h('p', '无数据')
            }
          }
        }]