方法一：
一般我们第一时间肯定是想用a标签加download属性，但它还是会在浏览器中打开，所有找其他方法
思路：使用vue自定义指令，对文件链接进行处理，将链接转化为blob进行下载
第一步：在src下创建download.js
import Vue from "vue";
import axios from 'axios'
Vue.directive('download', {
inserted: (el, binding) => {
el.addEventListener('click', () => {
//获取文件名称
let name = el.getAttribute('xzname')
let link = document.createElement('a')
let url = binding.value
// 这里是将url转成blob地址，
axios({
method:'get',
url:url,
responseType:'blob',
}).then(res=>{
// 创建隐藏的可下载链接
const a = document.createElement('a');
a.style.display = 'none';
a.href = URL.createObjectURL(res.data);
// 保存下来的文件名
a.download = name;
document.body.appendChild(a);
a.click();
// 移除元素
document.body.removeChild(a);
})
})
}
})
第二步：main.js中进行注册 import './download'
第三步：<a v-download="url">下载</a>
方法二：
安装依赖：npm i file-saver
注册：import { saveAs as FileSaver } from 'file-saver'
使用：
const oReq = new XMLHttpRequest()
const URL= '文件地址'；
oReq.open('GET', URL, true)
oReq.responseType = 'blob'
oReq.onload = function() {
const file = new Blob([oReq.response], {
type: 'blob'
})
FileSaver.saveAs(file, fileName) // fileName为文件名
}
oReq.send()
方法三：
如不想使用vue自定义指令，就简单的一个方法调用，和方法一类似，也是转成blob形式下载
axios({
method:'get',
url:url,
responseType:'blob',
}).then(res=>{
// 创建隐藏的可下载链接
const a = document.createElement('a');
a.style.display = 'none';
a.href = URL.createObjectURL(res.data);
// 保存下来的文件名
a.download = name;
document.body.appendChild(a);
a.click();
// 移除元素
document.body.removeChild(a);
})
