共计 1268 个字符,预计需要花费 4 分钟才能阅读完成。
需要:申请后盾接口,下载文件,如果胜利的话,间接获取到文件流下载,而不是门路。
创立一个 blob 对象
语法:
var BlobData = new Blob(array, options);
参数:
array:一个数组。官网概念:由 ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象形成的 Array,或者其余相似对象的混合体,它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
options: 一个对象。官网概念:是一个可选的 BlobPropertyBag 字典。有两个属性,type,默认值为 “”,放入到 blob 中的数组内容的 MIME 类型。endings,默认值为 ”transparent”,用于指定蕴含行结束符 \n 的字符串如何被写入。
创立实例:
var blob = new Blob([data], {type: 'charset=utf-8'})//data 能够是后盾返回的后果,如 response.data
vue+elementUI post 申请下载模板
downLoad(){// 调用办法 | |
// 创立一个加载框 | |
// 注:如果文件过大,会呈现点击下载后短时间内页面无反馈,倡议创立加载框进步交互成果 | |
const loading = this.$loading({//elementUI | |
lock: true, | |
text: '拉取文件中', | |
spinner: 'el-icon-loading', | |
background: 'rgba(0, 0, 0, 0.7)' | |
}) | |
// 创立须要传送的 data,这里用的是 Fromdata 格局,需依据我的项目状况来批改 | |
var fileData = new FormData() | |
fileData.append('id',id) | |
axios({// 留神需在页面引入 axios | |
method: 'post',// 申请形式 | |
url: 'http://*****',// 申请地址 | |
data: fileData,// 传输数据 | |
responseType: 'blob'// 数据格式 | |
}).then(res => {var blob = new Blob([res.data], {type: 'charset=utf-8'}) | |
var downloadElement = document.createElement('a') | |
var href = window.URL.createObjectURL(blob)// 创立链接 | |
downloadElement.href = href// a 标签赋值 | |
downloadElement.download = '文件名字' + '.pdf'// 文件类型 | |
document.body.appendChild(downloadElement)// a 标签增加到页面 | |
downloadElement.click()// 执行 a 标签点击成果 | |
document.body.removeChild(downloadElement)// 移除 a 标签 | |
window.URL.revokeObjectURL(href)// 开释 URL 对象 | |
loading.close()// 敞开加载框}) | |
// 下载完结 | |
} |
正文完