如何解决跨域导致<a>标签下载文件重命名失败download无效的问题以及解决如何使pdf文件在浏览器里面直接下载而不是打开

　　最近用到<a>标签实现文件下载并对文件进行重新命名，遇到了一些问题，文件重命名一直失败，所幸最终还是解决了，在此记录一下，避免后来者踩坑。

一、问题背景

　　我们先看一下问题背景：HTML <a> 元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接，其中href和download是我们下载文件所需要的两个属性。download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。

　　简而言之，跨域会导致download属性无效。

<a download="文件重命名附件.pdf " href="http://tmallapi.bluemoon.com.cn/课程.pdf">test</a>

　　这种情况下如果你的系统访问域名不是http://tmallapi.bluemoon.com.cn，download就无效。特别的说一下，http与https也属于跨域。

二、解决方案

　　download属性的使用存在很多的限制性，为了实现文件下载重命名，经过多方查询，找到了一种代替download的方法，亲测有效，具体方法如下：

1、a标签引入，其中url文件为静态文件地址，name为重命名名称，bookName为a标签显示内容

<a href="javascript:void(0)" onclick="courseDownload('url','name')>bookName</a>

2、js方法实现

// 下载
// @param  {String} url 目标文件地址
// @param  {String} filename 想要保存的文件名称
function courseDownload(url, filename) {
    getBlob(url, function(blob) {
        saveAs(blob, filename);
    })
}
function getBlob(url,cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
        if (xhr.status === 200) {
            cb(xhr.response);
        }
    };
    xhr.send();
}
// 保存
// @param  {Blob} blob
// @param  {String} filename 想要保存的文件名称
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement('a');
        var body = document.querySelector('body');
 
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
 
        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);
 
        link.click();
        body.removeChild(link);
 
        window.URL.revokeObjectURL(link.href);
    }
}

　　但是需要注意的是此方法只适用于小文件，对于大文件来说耗时太久，不适用。因为它相当于先把文件下载下来了，所以需要比较长时间，但是这段时间的等待，对于用户交互来说，那是很不友好的。

3、推荐解决方案

　　后端设置返回header：'content-disposition': `attachment; filename=${title}`，即可直接下载，而且对于一些txt、img、mp4等浏览器直接渲染的类型，也可以实现下载，而不是直接打开。

// 下载文件
export async function downloadFile (url, title) {
  let ossClient = await initOss(false)
  let response = {
    'content-disposition': `attachment; filename=${title}`
  }
  let _path = url.match(/(resource|video).*?(?=\?Expires)/) || []
  let _downurl = ossClient.signatureUrl(_path[0], { response })
  let a = document.createElement('a')
  a.href = _downurl
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

　　这样即可解决跨域下载问题。

三、解决如何使pdf文件在浏览器里面直接下载而不是打开

1、问题描述：

　　在做需求过程中我们大概率会遇到在浏览器中下载文件的需求，如果仅仅是这个要求的话很简单，有如下两种解决方式。

　　第一种是通过 window 对象的 open 方法进行操作，将文件 url 直接在浏览器中打开即可下载。window.open('url')

　　第二种是通过 a 标签，设置 href 为 url 值，点击 a 标签即可完成下载。<a href='url' download='文件名'></a>

　　但是上面两种文件下载方式都会存在一个问题，就是 pdf 文件会直接在浏览器中打开而不是直接下载。

2、解决方案：

　　这种需求的解决方式就是将PDF文件的 MIME type 改为 application/octet-stream 并加入 Content-Disposition:attachment header，原本的 pdf 文件 MIME type 为 application/pdf，浏览器识别到这个 type 之后会自动在浏览器打开，所以说我们在这里修改 type 即可。

　　修改的方法有两种，一种是在后端进行修改，上传文件或者返回文件的时候进行操作，但是绝大多数情况下文件都是存储到 cdn 服务器中的，后端也不方便对其进行操作，这个时候就需要前端来修改了。处理代码如下：

export function downloadFile(url, fileName) {
  if (!url) return
  var eleLink = document.createElement('a')
  eleLink.download = fileName
  eleLink.style.display = 'none'
  eleLink.href = url
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
}
// 处理 pdf url，使其不在浏览器打开
export const handlePdfLink = (url, fileName) => {
  fetch(url, { method: 'get', responseType: 'arraybuffer' })
    .then(function (res) {
      if (res.status !== 200) return res.json()
      return res.arrayBuffer()
    })
    .then((blobRes) => {
      // 生成 Blob 对象，设置 type 等信息
      const e = new Blob([blobRes], { type: 'application/octet-stream', 'Content-Disposition': 'attachment' })
      // 将 Blob 对象转为 url
      const link = window.URL.createObjectURL(e)
      downloadFile(link, fileName)
    })
    .catch((err) => {
      console.error(err)
    })
}