【VUE】下载后台流文件

Java生成流接口

@RequestMapping("/exportPdf")
public void exportPdf(@RequestParam("ids[]") List<String> ids, HttpServletRequest request, HttpServletResponse response) throws IOException {
    try {
        DatePattern.PURE_DATETIME_FORMAT.format(new Date());
        String name = "news" + DatePattern.PURE_DATETIME_FORMAT.format(new Date()) + ".zip";
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(name, "UTF-8"));
        response.setContentType(request.getServletContext().getMimeType(name));
        ServletOutputStream out = response.getOutputStream();
        templateService.exportPdf(ids, out);
        out.flush();
        out.close();
    } catch (Exception e) {
        log.error(e);
    }
}

Vue导出接口

// 导出下载方法
export function downLoadPdf(siteId, ids) {
    const data = {siteId, ids}
    return request({
        url: '/manage/exportPdf',
        method: 'post',
        responseType: "blob",
        data
    })
}

点解下载

// 下载
btnDownLoad() {
    downLoadPdf(this.listQuery.siteId, ids).then(response=>{
        this.downLoadFile4Blob(response, "data", "zip");
    })
},
downLoadFile4Blob(data, fileName, fileExt) {
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(new Blob([data]), fileName + '.' + fileExt)
    } else {
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName + '.' + fileExt)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) //下载完成移除元素
        window.URL.revokeObjectURL(url) //释放掉blob对象
    }
},