免费网站qq抓取,微信申请小程序流程,营销型网站设计制作,wordpress开玩笑_呵?下载Blob流文件#xff0c;并以服务形式显示文件下载进度
1、下载接口 增加 config参数#xff0c;并用...config将该属性加入到请求中#xff1b;
xxapi.js文件中设置downloadFile下载接口
// 下载文件
export function downloadFile(data, config) {return request({ur…下载Blob流文件并以服务形式显示文件下载进度
1、下载接口 增加 config参数并用...config将该属性加入到请求中
xxapi.js文件中设置downloadFile下载接口
// 下载文件
export function downloadFile(data, config) {return request({url: /xx/downloadFile,method: post,data: data,responseType: blob,timeout: 120 * 60 * 1000,...config})
}2、在页面中添加以下代码
el-button typetext iconel-icon-download clickhandleDownload(scope.row)下载/el-buttonscript
import { downloadFile } from /api/xxapi;
import { Loading } from element-ui
let downloadLoadingInstance;export default {name: DownloadFile,data() {return {downloadProgress: 0}},methods: {handleDownload(row) {var that this;downloadLoadingInstance Loading.service({ text: 正在下载数据请稍候 that.downloadProgress %, spinner: el-icon-loading, background: rgba(0, 0, 0, 0.7), })const config {onDownloadProgress: progressEvent {if (progressEvent.lengthComputable) {that.downloadProgress Math.round((progressEvent.loaded / progressEvent.total) * 100);downloadLoadingInstance.text 正在下载数据请稍候 that.downloadProgress %;}}};// 从后端请求到 二进制数据并由后端转成blobdownloadFile({ url: row.url }, config).then((response) {let downloadName ${row.fileName};this.downloadBlob(response, downloadName); // 二进制流直接取responsedownloadLoadingInstance.close(); // 关闭加载loading效果});},// 下载文件流格式的文件downloadBlob(response, downloadName) {let blob new Blob([response], {type: application/json;charsetutf-8,});let href window.URL.createObjectURL(blob); // 创建下载的链接if (window.navigator.msSaveBlob) {try {window.navigator.msSaveBlob(blob, downloadName);} catch (e) {console.log(e);}} else {// 谷歌浏览器 创建a标签 添加download属性下载let downloadElement document.createElement(a);downloadElement.href href;downloadElement.target _blank;downloadElement.download downloadName; // 下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); // 点击下载document.body.removeChild(downloadElement); // 下载完成移除元素window.URL.revokeObjectURL(href); // 释放掉blob对象}}}
}
/script
