Vue项目使用new Blob() 对返回文件流下载导出文件时封装调用示例(即文件流转Blob格式实现下载)

有钱夫人

已于 2022-10-31 15:43:30 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

于 2022-10-31 15:32:39 首次发布

本文链接：https://blog.csdn.net/Rich_lady/article/details/127616185

版权

一、需求

1、后台管理系统，对于一些上传的图片以及多种格式的文件，要实现下载功能

二、使用方式

1、举个例子，我们项目中目前是将文件都上传到oss

三、实现方式

1、在src/utils下新建download.js（代码如下）

import axios from 'axios'
import {Loading, Message} from 'element-ui'
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { blobValidate } from "@/utils/blob.js";   //引入blob的校验
import Vue from "vue";

2、配置开发环境url，直接引入

const baseURL = process.env.VUE_APP_BASE_API
let downloadLoadingInstance;

3、具体实现方法

export default {
  oss(ossId) {
    // debugger
    var url = baseURL + '/system/oss/download/' + ossId   // 可以实现批量下载，传入id
    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
    axios({
      method: 'get',
      url: url,
      responseType: 'blob',
      headers: { 'Authorization': 'Bearer ' + getToken() }
    }).then(async (res) => {
      const isLogin = await blobValidate(res.data);
      if (isLogin) {
        const blob = new Blob([res.data], { type: 'application/octet-stream' })
        this.saveAs(blob, decodeURI(res.headers['download-filename']))
      } else {
        this.printErrMsg(res.data);
      }
      downloadLoadingInstance.close();
    }).catch((r) => {
      console.error(r,r.stack)
      Message.error('下载文件出现错误，请联系管理员！')
      downloadLoadingInstance.close();
    })
  },
}

验证是否为blob格式,@/utils/blob.js

export async function blobValidate(data) {
  try {
    const text = await data.text();
    JSON.parse(text);
    return false;
  } catch (error) {
    return true;
  }
}

4、index.vue页面使用方式

<el-button type="primary"@click="handleDownload">点击下载</el-button>

methods: {
	handleDownload(){
	// 首先将download.js在main.js全局注册之后，Vue.prototype.$download = download 可以这样写
		this.$download.oss('1580751947651215362')  
		
	}
}