JS文件流下载

一、接口校验

下载前最好先校验接口是否可以正常下载，这里使用的是： postman

正常情况下，点击 Send 按钮会返回如上图所示的文件流，鼠标滑过 Send 按钮右侧的箭头会显示 Send and Download 按钮，点击此按钮会直接下载文件(文件后缀不正常时，手动更改就好了)

二、通过JS下载文件

	export function downLoadPdf(query) {
	  return request({
	    url: 'xxx/download',
	    method: 'post',
	    responseType: 'arraybuffer',	// 切记必须写上，否则可能下载的是空白页
	    data:query
	  })
	}

	// 下载完整pdf
    downPdf(img,name){//data:image/png;base64,
      downLoadPdf({imgUrl:img,"title":name,}).then(response => {
        var blob = new Blob([response],{type:"application/pdf;chartset=UTF-8",})
        this.saveAs(blob,name+'.pdf')
      });
    },
    saveAs(blob, fileName,fileUrl) {
      // 浏览器下载
      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);
        if(fileName){
          let len = fileName.split('.').length;
          if(len==1&&fileUrl){
            let suffix = fileUrl.split('.').splice(-1,1)[0];
            link.download = fileName+'.'+suffix;
          }else{
            link.download = fileName;
          }
        }
        // fix Firefox
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    }

其中最重要的是responseType必须赋值，否则下载的文件可能一片空白，但是除了Vue的axios外，其他场景传递responseType都会报错，解决的话再补充。

Failed to read the 'responseText' property from 'XMLHttpRequest':
 The value is only accessible if the 	object's 'responseType' is '' or 'text'