方法一：
一般我们第一时间肯定是想用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);
? ? ? ? ? })