vue 中使用blob導出，下載，驗證碼等的使用

Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取。

Blob 是一個構造函數，創建一個 Blob 的操作如下：

/** 下載excel文件流
* @params data [Object] 文件流
* type [String] 數據的 MIME 類型
*type有以下選擇：
*1、“application/msword” Word
*2、“application/vnd.ms-excel” Excel
*3、type: "image/png" 后台生成驗證碼圖片
*/ new Blob([data], {type})

　　

　　一、利用axios實現導出文件或者下載文件

1、具體下載方式 ---- 
        -----link = document.createElement("a")
        -----link.download = fileName
        -----link.href = href
        -----link.click();

axios({
    method: 'POST',
    url: xxx,// 這里是后端的接口地址
    responseType: 'blob',
    data: "傳輸的數據",
})
.then(res => {
    // 假設res表示后端發來的流數據
    let blob = new Blob([res], {type: "application/msword"}), // 此處為生成doc
    link = document.createElement("a"),
    href = window.URL.createObjectURL(blob);
    link.href = href;
    link.download = "下載后文件的文件名";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(href); // 釋放掉blob對象
}) 
2、具體下載方式 ---- window.location.href = url
// 請求封裝方式 axios.js
export const BASEURL = "http://xxxxx"; // 本地測試
const instance = axios.create({
  baseURL: BASEURL,
  timeout: 1000 * 60 * 5,
});
//響應攔截器即異常處理
instance.interceptors.response.use(
  (res) => {
    if (true) {
      // 登陸異常攔截 // token 失效
      if (res.data.code == 11010) {
        router.push({ path: "/" });
        localStorage.setItem("token", null);
        localStorage.setItem("user", JSON.stringify({}));
      }
    }
    return res;
  },
  (err) => {
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = "錯誤請求";
          break;
        ....
        default:
          err.message = `連接錯誤${err.response.status}`;
      }
    } else {
      err.message = "連接到服務器失敗";
    }
    // this.$message.error(err.message);
    return Promise.resolve(err.response);
  }
);

instance.interceptors.request.use((config) => {
  if (config.url.indexOf('createCode') != -1 || config.url.indexOf('downloadRoomData') != -1 || config.url.indexOf('downloadRoomCardData') != -1) {
    config.responseType = 'blob'   // 記住 這里設置blob是最關鍵的地方沒有這個設置無法下載
    console.log(config)
  }
  const token = localStorage.getItem("logintoken");
  if (token) {
    config.headers["token"] = token;
  }
  if(/\/survey\/v1\/images\/download$/.test(config.url)){
    config.responseType = 'arraybuffer'
  }
  return config;
});

export const GET = (url, params) =>
  instance({
    url,
    params,
  })
    .then((res) => Promise.resolve(res.data))
    .catch((err) => {});

export const POST = (url, data) =>
  instance
    .post(url, data)
    .then((res) => Promise.resolve(res.data))
    .catch((err) => {});

export const PUT = (url, data) =>
  instance
    .put(url, data)
    .then((res) => Promise.resolve(res.data))
    .catch((err) => {});

export const DELETE = (url, data) =>
  instance
    .delete(url, data)
    .then((res) => Promise.resolve(res.data))
    .catch((err) => {});

config.js  // 舉例說明使用方法
export const xx= (data) => GET('請求地址', data);
export const xx= (data) => POST('...', data);
export const xx= (id) => DELETE('...' + "/" + id);
export const uploadImage = BASEURL + '/upload/uploadImage';

// 頁面使用
import { xx , uploadImage } from "../../api/config";

await downloadRoomData(parameter).then((res) => {
        this.loading = false
        let blob = new Blob([res], {type: "application/vnd.ms-excel"});
        let url = window.URL.createObjectURL(blob);
        window.location.href = url
        this.$message.success("下載成功！");
}).catch((reg) => {
        this.loading = false
        this.$message.error('導出失敗！請重新導出。')
})

/* let blob = new Blob([res], {type: "application/vnd.ms-excel"});
*type有以下選擇：
*1、“application/msword” Word
*2、“application/vnd.ms-excel” Excel
*/

　　二、實現圖片驗證碼

示例：

 

 

async getcode() {
      await createCode().then((res)=>{
        let blob = new Blob([res],{type: "image/png"});
        let url = window.URL.createObjectURL(blob);
        this.ruleForm.codeimg = url
      })
 },