vue附件下载

a标签下载

{{ file.name }}  

   
    @ApiOperation(value = "下载附件", notes = "")
    @RequestMapping(path = "/uploadById", method = RequestMethod.GET)
    @CrossOrigin
    public void uploadById(HttpServletRequest request, HttpServletResponse response, String id) {
        log.debug("下载附件");
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");

        try {
            InputStream fis=null;
            File file =null;
            if(id!=null&&!"".equals(id)){
                String newfilename=null;
                String allPath=null;
                CommonAttachment attachment = commonAttachmentService.getById(id);
                newfilename = attachment.getFileName();
                //附件存在本地，本地路径+相对路径
                allPath = ConstantDB.REPOTR_LOG_DIR + attachment.getFilePath();
                // path是指欲下载的文件的路径。
                file = new File(allPath);
                fis= new BufferedInputStream(new FileInputStream(allPath));

                byte[] buffer = new byte[fis.available()];
                fis.read(buffer);
                fis.close();
                // 清空response
                response.reset();
                // 设置response的Header
                response.addHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(newfilename, "UTF-8"));
                OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
                response.setContentType("application/octet-stream");
                toClient.write(buffer);
                toClient.flush();
                toClient.close();
            }
        } catch(FileNotFoundException e){
            System.out.println("---------文件下载失败，该文件不存在。-----------");
        }catch (IOException ex) {
            ex.printStackTrace();
        }
    }

axios下载（由于a标签无法携带token，所以需要使用该方式）

 {{ file.name }}  
     
  axios({
        method: 'get',
        url: url,
        responseType: 'blob',
        headers: {Authorization: token}
      }).then(res => {
        const {data} = res
        const blob = new Blob([data])
        let disposition = decodeURI(res.headers['content-disposition'])
        // 从响应头中获取文件名称
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = name
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, name)
        }
      }).catch((error) => {
        console.log(error)
      })

try {
    if (id == null) {
        throw new Exception(StringUtils.format("资源文件id({})为空，不允许下载。 ", id));
    }
    CommonAttachment attachment = commonAttachmentService.getById(id);
    if (attachment == null) {
        throw new Exception(StringUtils.format("非找到id的({})的资源文件，不允许下载。 ", id));
    }
    // 数据库资源地址,本地+相对
    String downloadPath = ConstantDB.REPOTR_LOG_DIR + attachment.getFilePath();
    // 下载名称
    String downloadName = StringUtils.substringAfterLast(downloadPath, "/");
    response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
    FileUtils.setAttachmentResponseHeader(response, attachment.getFileName());
    FileUtils.writeBytes(downloadPath, response.getOutputStream());
} catch (Exception e) {
    log.error("下载文件失败", e);
}