vue中文件下载
前言
Vue浏览器文件下载最简单的方法就是用a链接实现，然后加一个download属性。让后端返回[blob]文件格式，需要传递 responseType: ‘blob’
一、使用步骤
展示文件，文件点击后查看方法为handlePreview
<span style="margin-top:50px;">附件</span>
        <el-upload 
                action=""
                list-type="text"
                :on-preview="handlePreview"
                disabled
                :file-list="fileList">
        <i class="el-icon-plus"></i>
        </el-upload>

二、使用步骤
1.设置文件返回类型
config.responseType='blob'

如图所示：


2.前端请求接口方法
handlePreview(file) {
        let data={}
        let typeArray=file.url.split(".")
        let type=typeArray[typeArray.length-1]
        debugger
        data.url=file.url
        data.name=file.name
        fileupload._getDownLoad(data).then((res) => {
            let url = window.URL.createObjectURL(new Blob([res]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', file.name)
            document.body.appendChild(link)
            link.click()
        })
    }

3.后端返回文件接口
@RequestMapping(value = "/getDownLoad", method = RequestMethod.POST)
    public void getDownLoad(HttpServletResponse response,@RequestBody Imgurl imgurl) throws IOException {
        FileInputStream inputStream = null;
        try{
            File file = new File(imgurl.getUrl());
            inputStream = new FileInputStream(file);
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            byte[] buffer = new byte[1024];
            int length;
            while ((length = inputStream.read(buffer)) != -1) {
                os.write(buffer, 0, length);
            }
            byte[] data = os.toByteArray();
            response.resetBuffer();
            response.resetBuffer();
            response.setHeader("Content-Disposition", "attachment");
            response.addHeader("file-name",URLEncoder.encode(imgurl.getName(), "UTF-8"));
            response.addHeader("Content-Length", "" + data.length);
            response.setContentType("application/octet-stream; charset=UTF-8");
            IOUtils.write(data,response.getOutputStream());
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
        finally {
            if(inputStream != null)
            {
                inputStream.close();
            }
        }
    }

总结
今天遇到一个vue下载文件的开发功能，按照正常方法请求一直报错，经过请教大神，用a链接简单的方法实现，本文仅仅简单记录自己的开发过程。

第一：请求的responseType为blob，以post请求为例：

downloadClick(row){
        let entity = {
          id: row.id,
          filename: row.filename,
        }
        this.$http.post('/v1/FileManage/downloadFile', entity ,{responseType: 'blob'}).then((response)=> {
         this.download(response.body,row)
        });
      },

第二步：请求成功，拿到response里面的数据后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

methods: {
    // 下载文件
    download (data,row) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        // 获取文件名
        // download 属性定义了下载链接的地址而不是跳转路径
        link.setAttribute('download', row.filename)
        document.body.appendChild(link)
        link.click()
    }
}

传送门：后台代码：https://blog.csdn.net/mibi8840/article/details/86742134

功能：点击导出按钮，提交请求，下载excel文件；
第一步：跟后端确认交付的接口的response header设置了
response header
以及返回了文件流。
第二步：修改axios请求的responseType为blob，以post请求为例：
axios({
    method: 'post',
    url: 'api/user/',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    responseType: 'blob'
}).then(response => {
    this.download(response)
}).catch((error) => {

})

第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）
methods: {
    // 下载文件
    download (data) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'excel.xlsx')

        document.body.appendChild(link)
        link.click()
    }
}

vue实现word或pdf文档导出的功能，后端返回一个文档流(下图)，然后前端对文档流做处理进行下载，
      import axios from 'axios';      
      axios.get(`url`, { //url: 接口地址
        responseType: `arraybuffer` //一定要写
      })
      .then(res => {
        if(res.status == 200){
          let blob = new Blob([res.data], {
            type: `application/msword` //word文档为msword,pdf文档为pdf
          });
          let objectUrl = URL.createObjectURL(blob);
          let link = document.createElement("a");
          let fname = `我的文档`; //下载文件的名字
          link.href = objectUrl;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
        }else {
          this.$message({
          type: "error",
          message: "导出失败"
          })
        }
      })


两种方式任选

后台controller
    @GetMapping("/DownloadWorkorderFile")
    @ResponseBody
    public void DownloadWorkorderFile(HttpServletRequest request, HttpServletResponse response, String filePath){
        File file = new File(filePath);
        // 取得文件名。
        String fileName = file.getName();
        InputStream fis = null;
        try {
            fis = new FileInputStream(file);
            request.setCharacterEncoding("UTF-8");
            String agent = request.getHeader("User-Agent").toUpperCase();
            if ((agent.indexOf("MSIE") > 0) || ((agent.indexOf("RV") != -1) && (agent.indexOf("FIREFOX") == -1)))
                fileName = URLEncoder.encode(fileName, "UTF-8");
            else {
                fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");
            }
            response.reset();
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/force-download");// 设置强制下载不打开
            response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
            response.setHeader("Content-Length", String.valueOf(file.length()));

            byte[] b = new byte[1024];
            int len;
            while ((len = fis.read(b)) != -1) {
                response.getOutputStream().write(b, 0, len);
            }
            response.flushBuffer();
            fis.close();
        }catch (IOException e) {
            throw new RuntimeException(e);
        }

    }


前端Vue
<template>
  <div>
    <el-button type="primary" @click="download">下载</el-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
    };
  },
  methods: {
    // 下载事件
    download() {
      var path = '/home/axs-spring/data/ceshi.png';
      window.open("http://localhost:8041/Management/DownloadWorkorderFile?filePath=" + encodeURI(path));
    },
  }
};
</script>