zoukankan      html  css  js  c++  java
  • [vue] 通用下载方法

    const service = axios.create({
        // axios中请求配置有baseURL选项,表示请求URL公共部分
        baseURL: process.env.VUE_APP_BASE_API,
        // 超时
        timeout: 1000000
    })

     download.js

    import axios from 'axios'
    import { getToken } from '@/utils/auth'
    
    const mimeMap = {
      xls: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      zip: 'application/zip',
      base: 'application/x-www-form-urlencoded'
    }
    
    const baseUrl = process.env.VUE_APP_BASE_API
    export function download(str, params, mime, fileName,method) {
      if (!mime) mime = mimeMap.base
      var url = baseUrl + str
      return axios({
        method: method==='post'?'post':'get',
        url: url,
        data: method==='post'?params:'',
        params:method==='post'?'':params,
        responseType: 'blob',
        headers: { 'Authorization': 'Bearer ' + getToken() }
      }).then(res => {
        resolveBlob(res, mimeMap[mime],fileName)
      })
    }
    /**
     * 解析blob响应内容并下载
     * @param {*} res blob响应内容
     * @param {String} mimeType MIME类型
     */
    export function resolveBlob(res, mimeType,fileName) {
      const aLink = document.createElement('a')
      var blob = new Blob([res.data], { type: mimeType })
      // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
      // var patt = new RegExp('filename=([^;]+\.[^\.;]+);*')
      // var contentDisposition = decodeURI(res.headers['content-disposition'])
      // var result = patt.exec(contentDisposition)
      // var fileName = result[1]
      // fileName = fileName.replace(/"/g, '')
      
      aLink.href = URL.createObjectURL(blob)
      aLink.setAttribute('download', fileName) // 设置下载文件名称
      document.body.appendChild(aLink)
      aLink.click()
      // document.body.appendChild(aLink)
    }
  • 相关阅读:
    frp最简配置 实现内网穿透(访问内网WEB服务器)
    frp最简配置 实现内网穿透(访问内网其他服务器SSH)
    Linux 进程树查看工具 pstree
    svn Server authz 配置示例(文件夹权限配置)
    centos7 安装 mysql5.7.25
    centos7中将tomcat注册为系统服务
    keepalived 配置文件解析
    datatables参数配置详解
    使用jquery.datatable.js注意事项
    ondblclick和dblclick区别
  • 原文地址:https://www.cnblogs.com/lv77/p/14887384.html
Copyright © 2011-2022 走看看