vue 通过blob下载流文件_vue blob下载文件

在web端的管理系统中常会用到的功能就是下载文件（包含excel、word、txt等），今天我就来说一说我是如何实现的。

下载有两种形式，一种是后台接口直接返回下载的路径，根据路径下载，另一种是后台接口返回流文件（一堆乱码，如下图所示），我们根据blob来下载。本篇文章主要介绍的是blob下载文件。下面就来具体说说是如何是现实：

1、下载blob文件需要知道文件对应格式的type，所以要明确下载文件格式（以word、excel、txt为例）

2、知道了所需要下载的文件格式后，我们就可以写了，直接上代码

<template>
  <div>
    <el-button type="primary" @click="downloadFile" size="medium" plain icon="el-icon-download">下载</el-button>
  </div>
</template>
 
<script>
import axios from 'axios';
export default {
  name: 'Test',
  data() {
    return {};
  },
  methods: {
    downloadFile() {
      let url_post = '接口地址';
      //post方式，param为所需要传的参数，
      // responseType: 'arraybuffer'一定要写，否则下载的文件会出现乱码
      axios
        .post(url_post, param, { responseType: 'arraybuffer' })
        .then(res => {
          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); //type为所需要下载的文件格式，以xls文件为例
 
          //浏览器兼容，Google和火狐支持a标签的download，IE不支持
          if (window.navigator && window.navigator.msSaveBlob) {
            //IE浏览器、微软浏览器
            /* 经过测试，微软浏览器Microsoft Edge下载文件时必须要重命名文件才可以打开，
              IE可不重命名，以防万一，所以都写上比较好 */
            window.navigator.msSaveBlob(blob, '文件.xls');
          } else {
            //其他浏览器
            let link = document.createElement('a'); // 创建a标签
            link.style.display = 'none';
            let objectUrl = URL.createObjectURL(blob);
            link.href = objectUrl;
            link.click();
            URL.revokeObjectURL(objectUrl);
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

好了，今天就分享到这里，see you。。。