点击a标签下载pdf并解决跨域问题

 通过设置download来实现点击url下载

<a href="test.pdf" target="Blank" download="模板.pdf">下载</a>

想要的效果：

实际效果： 

此时会跳转的新的页面，展示pdf的内容,download无效，这是因为异步的原因，存在跨域问题，无法实现直接下载

解决跨域问题：

 <a style="color: #409eff" @click="download(url, fileName)">下载</a> 

function download(url, filename) {
 
  var url = url;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true); // 异步
  xhr.responseType = 'blob'; // blob 类型
  xhr.onload = function () {
 
    if (xhr.status !== 200) {
 
      alert('下载异常！');
      return;
 
    }
    if (window.navigator.msSaveOrOpenBlob) {
 
      // IE
      navigator.msSaveBlob(xhr.response, filename);
 
    } else {
 
      var newUrl = window.URL.createObjectURL(xhr.response);
      var a = document.createElement('a');
      a.setAttribute('href', newUrl);
      a.setAttribute('target', '_blank');
      a.setAttribute('download', filename + '.pdf'); // 自定义文件名（有效）
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
 
    }
 
  };
  xhr.send();
 
}

通过这种方式可以解决跨域问题，实现想要的效果