文件下载的几种类型以及封装及使用

import axios from "axios"
// axios.defaults.timeout = 30 \* 1000;
// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
import FileSaver from "file-saver"
import { saveAs } from "file-saver/FileSaver"
export function getRequest(url, params, noFilter) {
  var newParam
  if (!noFilter) {
    newParam = filterParam(params)
  } else {
    newParam = params
  }
  url += (url.indexOf("?") < 0 ? "?" : "&") + translateParam(newParam)
  return new Promise((resolve, reject) => {
    return axios
      .get(url)
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

export function postRequest(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then((response) => {
        resolve(response.data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
export function putRequest(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then((response) => {
        resolve(response.data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

export function deleteRequest(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, { data: params })
      .then((response) => {
        resolve(response.data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
// 下载csv文件 post
export function downloadPost(params, url, fileName = "") {
  let context = ""
  axios({
    method: "post",
    headers: {
      "Content-type": "application/json",
    },
    data: params,
    url: url,
  }).then((res) => {
    let data = res.data
    var FileSaver = require("file-saver")
    var file = new File(
      ["\uFEFF" + data],
      fileName + new Date().getTime() + ".csv",
      {
        type: "text/plain;charset=utf-8",
      }
    )
    FileSaver.saveAs(file)
  })
}

// 下载csv文件 get
export function downloadUrl(url, type = ".csv") {
  let context = ""
  axios.get(url).then((res) => {
    context = res.data
    let file = new File(["\uFEFF" + context], new Date().getTime() + type, {
      type: "text/plain;charset=utf-8",
    })
    FileSaver.saveAs(file)
  })
}
// 导出 execl 文件 POST
export function downloadExeclPost(url, params, type, fileName = "") {
  axios({
    method: "post",
    url: url,
    headers: {
      "Content-type": "application/json",
    },
    responseType: "blob",
    data: params,
  })
    .then((res) => {
      if (null != res.headers["content-disposition"]) {
        fileName = res.headers["content-disposition"].split("=")[1]
      } else {
        // fileName = new Date().getTime() + '.' + type
        fileName = "金融车批量查询" + "." + type
      }
      fileDownload(res.data, type, fileName)
    })
    .catch((error) => {
      alert("网络请求出错!", error)
    })
}
// 导出 execl 文件,get
export function downloadExecl(url, type, fileName = "") {
  axios({
    method: "GET",
    url: url,
    responseType: "blob",
    // data: {},
    //此处配置 token 和入参类型
    // transformRequest: [function(fData, headers) {
    // headers['Content-Type'] = 'application/json'
    // headers['Authorization'] = 'RDS eyJhbGciOiJIUzUxMiJ9.eyJyYW5kb21LZXkiOiIwLjI4MjIwNTI2OTQ2MjgyMTEiLCJzdWIiOiJjZWQ0NTViOTAyNDRhMmZlZDBjMmIzNmI4MjY1ZWY4MiIsImV4cCI6MTYwMTI5ODg2OCwiaWF0IjoxNjAxMjU1NjY4fQ.kGmaiXn8qZfC1ZnHCwWO6rMcmO_a1u60CsL-9oANV81Nv-nD7S2crDGpAGTECXxYcVvM6R3Uyj13UuZnBrSfVQ.wmrds142'
    // return JSON.stringify(fData)
    // }]
  })
    .then((res) => {
      if (null != res.headers["content-disposition"]) {
        fileName = res.headers["content-disposition"].split("=")[1]
      } else {
        fileName = new Date().getTime() + "." + type
      }
      fileDownload(res.data, type, fileName)
    })
    .catch((error) => {
      alert("网络请求出错!", error)
    })
}
function fileDownload(data, type, fileName) {
  let blob = new Blob([data], {
    type: "application/octet-stream",
  })
  let filename = fileName || "filename." + type
  if (typeof window.navigator.msSaveBlob !== "undefined") {
    window.navigator.msSaveBlob(blob, filename)
  } else {
    var blobURL = window.URL.createObjectURL(blob)
    var tempLink = document.createElement("a")
    tempLink.style.display = "none"
    tempLink.href = blobURL
    tempLink.setAttribute("download", filename)
    if (typeof tempLink.download === "undefined") {
      tempLink.setAttribute("target", "_blank")
    }
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    window.URL.revokeObjectURL(blobURL)
  }
}

export function translateTqParam(data) {
  let url = ""
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ""
    url += `&${k}=${value}`
  }
  return url ? url.substring(1) : ""
}

export function translateParam(data) {
  let url = ""
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ""
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ""
}

export function filterParam(param) {
  let obj = {}
  for (let key in param) {
    if (param[key]) {
      obj[key] = param[key]
    }
  }
  return obj
}

　　封装：

import { getRequest, postRequest,translateParam ,downloadExeclPost, downloadPost} from '@/assets/js/request'

export const BaseUrls = {
    vehicleInfo: reqUrl + 'download/vehicleInfo',
    download: reqUrl + 'download/download/carInfo'
}
export function insulationList(params) {
  let url = BaseUrls.insulationList
  try {
    const result = getRequest(url, params)
    return result
  } catch (err) {
    return err
  }
}

export function postAction(url, params) {
  try {
    const result = postRequest(BaseUrls[url], params)
    return result
  } catch (err) {
    return err
  }
}
// post
export function downloadDetail(params, fileName) {
  let url = BaseUrls.DownloadDetail
  try {
    const result = downloadPost(params, url, fileName)
    return result
  } catch (err) {
    return err
  }
}
export function downloadDeltaSOC(params) {
  let url = `${BaseUrls.downloadDeltaSOC}?${translateParam(params)}`
  downloadUrl(url)
}

export function getDelete(params) {
  let url = BaswUrls.getDelete
  try {
    const result = deleteRequest(url, params)
    return result
  } catch (err) {
    return err
  }
}
//get
downloadDetail2(params){
    let url = `${BaseUrls.DownloadDetail}?${translateParam(params)}`
    let type = 'xls'
    downloadExecl(url, type)
},
pptDownload(params){
    let url = `${BaseUrls.pptDownload}?${translateParam(params)}`
    let type = 'ppt'
    downloadExecl(url, type)
},
export function downloadOperationCar(params,fileName) {
    let url = BaseUrls.downloadOperationCar
    let type = 'xls'
    downloadExeclPost(url,params,type)
}

　　使用：

import {
  postAction,
  insulationList,
  downloadDetail,
} from "sss"

     import api from "xxx";

insulationList().then((res) => {})
postAction().then((res) => {})
// post
let res = downloadDetail()

let res = downloadDeltaSOC(queryList)

getDelete().then((res) => {})
// get
let res = downloadDetail2()

api.pptDownload()