vue2文件下载

引入axios用于调接口用 

import axios from 'axios'

调接口时需要加token 

import {

getToken

} from '@/utils/auth'

const mimeMap = {

xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

zip: 'application/zip'

}

这是接口的公共部分

const baseUrl = process.env.VUE_APP_BASE_API

export function downLoadZip(str, filename) {

var url = baseUrl + str

axios({

method: 'get',

url: url,

responseType: 'blob',

headers: {

'Authorization': 'Bearer ' + getToken()

}

}).then(res => {

resolveBlob(res, mimeMap.zip)

})

}

/**

* 解析blob响应内容并下载

* @param {*} res blob响应内容

* @param {String} mimeType MIME类型

*/

export function resolveBlob(res, mimeType) {

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, '')

let url = URL.createObjectURL(blob)

aLink.href = url

aLink.setAttribute('download', fileName) // 设置下载文件名称

document.body.appendChild(aLink)

aLink.click()

document.body.removeChild(link); // 下载完成移除元素

window.URL.revokeObjectURL(url); // 释放掉blob对象

}