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链接简单的方法实现，本文仅仅简单记录自己的开发过程。

1.前台

按钮

   <el-button
                          size="mini"
                          icon="el-icon-edit-outline"
                          type="primary"                      
                          @click="fileDownload(scope.row)"
                        >下载附件</el-button>

方法

fileDownload(row){
       window.location.href = "http://localhost:后台端口号/fileDownload/"  + row.id ;
    },

2.后台

/**
	 * 下载文件
	 * @param request
	 * @param response
	 * @param id
	 * @return
	 * @throws MyException
	 */
	@RequestMapping(value = "/fileDownload/{id}")
	public JsonResult<Object> fileDownload(HttpServletRequest request,HttpServletResponse response,@PathVariable("id") String id) throws Exception{
		
		DeviceSoftware deviceSoftware = deviceSoftwareServiceImpl.getDeviceSoftware(id);//根据文件id从表格中获取该文件的所有信息
		if(deviceSoftware!=null){
			File file = new File(deviceSoftware.getSwpath());//获取文件存在的地方
			//设置返回文件信息
			if(file.exists()) {
			//可以保存为xls格式的excel文件（兼容老版本）
			response.setContentType("application/vnd.ms-excel;charset=UTF-8");
			response.setCharacterEncoding("UTF-8");//解决POST乱码
			String filename = URLEncoder.encode(file.getName(), "UTF-8");
			//设置响应头为文件下载, // 下载文件能正常显示中文
			response.setHeader("content-disposition", "attachment;filename="+filename);
			response.setContentLength((int)file.length());
			int len = 0;
			// 实现文件下载
			byte []buffer = new byte[1024];
			try {
				InputStream is = new FileInputStream(file);
				OutputStream os= response.getOutputStream();//向浏览器写数据
				while((len = is.read(buffer)) != -1){
					os.write(buffer,0,len);
				}
				is.close();
				os.close();
				System.out.println("Download the song successfully!");
			}
			catch (Exception e) {
				System.out.println("Download the song failed!");
			}
	
		}						
		}
		return null;    //一定要返回null,执行后不跳转
	}

对于Vue中实现一般的下载功能很简单，一般为了方便，在项目文件的api.js配置文件中添加一个下载方法即可，这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。

api.js配置

export default {
//   下载关键代码
  download(url, params) {
    return new Promise((resolve, reject) => {
        axios({
        //   和后端协商好下载方法post/get?
        method: 'Post',
        url: baseUrl + url,
        data: params,
        headers: {
            'Content-Type': 'application/json',
            // 设置请求头携带的token
          token: JSON.parse(localStorage.getItem('userInfo')).token,
        },
        responseType: 'blob',
      })
        .then((res) => {
          console.log(res);
          const fileName = res.headers['content-disposition'].split('filename=')[1];
          const response = res.data;
          const r = new FileReader();
          r.onload = () => {
            try {
              const resData = JSON.parse(this.result);
              if (resData) {
                if (resData.error_no === undefined) {
                  throw new Error('解析成功！');
                } else if (resData.error_no !== '0') {
                  Message({
                    message: resData.error_info || 'Error',
                    type: 'error',
                    duration: 5 * 1000,
                  });
                }
              }
            } catch (err) {
              // 兼容ie11
              if (window.navigator.msSaveOrOpenBlob) {
                try {
                  const blobObject = new Blob([response]);
                  window.navigator.msSaveOrOpenBlob(blobObject, fileName);
                } catch (e) {
                  console.log(e);
                  reject(e);
                }
                return;
              }
              const url = window.URL.createObjectURL(new Blob([response]));
              const link = document.createElement('a');
              link.style.display = 'none';
              link.href = url;
              link.setAttribute('download', fileName);
              document.body.appendChild(link);
              link.click();
            }
          };
          r.readAsText(response);
          resolve();
        })
        .catch((error) => {
          console.log(error);
          Message({
            message: '下载失败！',
            type: 'error',
            duration: 5 * 1000,
          });
          reject(error);
        });
    });
  },
};

Vue实例中使用该方法。使用方式和get和post、put等接口请求方式一样。

<template>
  <div class="contain">
    <div class="tableArea">
      <el-table v-loading="loading" :data="tableData" stripe>
        <!-- <template slot="empty" slot-scope="scope">
          <p>sadssadssadsadsdsadsa</p>
        </template> -->
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="fileOrgName" label="名称" min-width="180">
          <template slot-scope="scope">
                                       触发下载函数
            <div @click="downloadHandler(scope.row)">
              <p style="color:#4880ff;cursor: pointer;">{{ scope.row.fileOrgName }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="数据日期" min-width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | createformat() }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remainDay" label="数据表类型" min-width="180">
        </el-table-column>
        <el-table-column prop="updateTime" label="上传时间" min-width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.updateTime | updateformat() }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="上传人" min-width="180"></el-table-column>
      </el-table>

      <pagination :size="page.pageSize" :current="page.current" :total="page.total" @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" />
    </div>
    <tips :dialogVisible="tipsVisible" @on-cancel="tipsVisible = false" @on-ok="enterCover"></tips>
  </div>
</template>
<script>
import moment from 'moment';
import tips from '../../components/tips';

export default {
  filters: {
    createformat(val) {
      return moment(val).format('YYYY/MM/DD');
    },
    updateformat(val) {
      return moment(val).format('MM/DD HH:mm');
    },
  },
  components: {
    tips,
  },
  data() {
    return {
      fileList: [],
      tableData: [],
      fileAgain: null,
      loading: false,
      tipsVisible: false,
      page: {
        total: 1,
        current: 1,
        pageSize: 5,
      },
    };
  },
  created() {
    this.readExcel();
  },
  methods: {
    // 下载当前表单，使用方式和get和post、put等接口请求方式一样
    downloadHandler(val) {
      this.$api.download(`/file/downloadFile?fileId=${val.id}`).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>