js 实现图片、pdf、docx的下载

同域名下的文件下载

1. 新页面打开

window.open('文件链接')
window.location.href='文件链接'

2. a标签填写download属性

<a href="要下载的文件链接" download="文件名称" ></a>

跨域的文件下载

以上的方法不再起作用

1. 对于图片（jpg、png、jpeg）的下载，可以借助canvas实现，生成新的的url地址

downloadImage(imgsrc, name) {
    const image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, image.width, image.height);
      const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
      const a = document.createElement('a'); // 生成一个a元素
      const event = new MouseEvent('click'); // 创建一个单击事件
      a.download = name || 'photo'; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = imgsrc;
  },

2.下载docx文档、pdf、excel等文件，可以借助blob对象实现。先将文件转化成blob流，然后再生成新的url放在带download的a标签上（同样可以下载图片，表格等）

function fileLinkToStreamDownload(url, fileName, type) {
     let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
     if (!reg.test(url)) {
       throw new Error("传入参数不合法,不是标准的文件链接");
     } else {
       let xhr = new XMLHttpRequest();
       xhr.open('get', url, true);
       xhr.setRequestHeader('contentType', `application/${type}`);
       xhr.responseType = "blob";
       xhr.onload = () =>{
         console.log(xhr)
         if (xhr.status == 200) {
            //接受二进制文件流
           var blob = xhr.response;
           this.downloadExportFile(blob, fileName, type)
         }
       }
       xhr.send();
     }
   };
   function downloadExportFile(blob, tagFileName, fileType) {
     let downloadElement = document.createElement('a');
     let href = blob;
      if (typeof blob == 'string') {
        downloadElement.target = '_blank';
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      console.log(href);
      downloadElement.href = href;
      downloadElement.download = tagFileName; //下载后文件名
      const event = new MouseEvent('click'); // 创建一个单击事件
      downloadElement.dispatchEvent(event); // 触发a的单击事件
      if (typeof blob != 'string') {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    }；
//下载pdf
this.fileLinkToStreamDownload('xxx.pdf', 'pdf文档', 'pdf')
//下载docx
this.fileLinkToStreamDownload('xxx.docx', 'word文本文档', 'docx')

二进制文件导出(后端返回的是流，不是文件名称)

// post或者get都可以（get一般直接请求接口地址即可）
// 添加请求头{responseType: 'blob'} 返回的类型为二进制
//  从响应头中拿到文件名称
axios.post('接口', params, { responseType: 'blob' }).then((res) => {
      const title = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]); // 拿到文件名，后端一般放在响应头中
      downloadExportFile(res.data, title) // 调用上方的二进制流转url的函数
    })