文件下载(使用xhr)

编程入门 行业动态 更新时间:2024-10-12 14:17:23

<a href=https://www.elefans.com/category/jswz/34/1771438.html style=文件下载(使用xhr)"/>

文件下载(使用xhr)

第一种下载多种格式文档参数为拼接id get方法

import Cookies from 'js-cookie';
// 下载
const fullNewName = ref()
const fileType = ref()
const onUpload = async (row: any) => {fullNewName.value = row.namefileType.value = row.fileSuffixlet xhr = new XMLHttpRequest();xhr.open('get', `${baseUrl}api/v1/admin/file/download?id=${row.id}`, true);xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');xhr.setRequestHeader('Authorization', `Bearer ${JSON.parse(Cookies.get('tm_token'))}`);xhr.responseType = "blob"; // 返回类型blobxhr.send(); // 发送ajax请求xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {//创建blob对象const blob = new Blob([xhr.response]);const fileName = fullNewName.value;//创建下载元素const downloadElement = document.createElement('a');// 创建下载的链接const href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = fileName; // 下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); // 点击下载document.body.removeChild(downloadElement); // 下载完成移除元素window.URL.revokeObjectURL(href); // 释放掉blob对象}}
}

第二种下载word 文档,无参数 get

const exportDocument = async () => {await ElMessageBox.confirm(`是否全部导出`, '提示', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',})let xhr = new XMLHttpRequest();xhr.open('get', `${baseUrl}api/v1/admin/common/SwaggrGenerateWordDoc`, true);xhr.setRequestHeader('Content-Type', 'application/mxword');xhr.setRequestHeader('Authorization', `Bearer ${JSON.parse(Cookies.get('tm_token'))}`);xhr.responseType = "blob"; // 返回类型blobxhr.send(); // 发送ajax请求xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {//创建blob对象const blob = new Blob([xhr.response], { type: 'application/mxword' });const fileName = '';//创建下载元素const downloadElement = document.createElement('a');// 创建下载的链接const href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = 'Swagger接口文档.docx'; // 下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); // 点击下载document.body.removeChild(downloadElement); // 下载完成移除元素window.URL.revokeObjectURL(href); // 释放掉blob对象}}
}

第三种下载word 文档,参数为数组,放入请求体中 post方法

const exportDocument = async () => {await ElMessageBox.confirm(`是否全部导出`, '提示', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',})let xhr = new XMLHttpRequest();xhr.open('post', `${baseUrl}api/v1/admin/common/TMApiGenerateWordDoc`, true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.setRequestHeader('Authorization', `Bearer ${JSON.parse(Cookies.get('tm_token'))}`);xhr.responseType = "blob"; // 返回类型blobxhr.send(JSON.stringify(tableAllData)); // 发送ajax请求// xhr.send(JSON.stringify(tableListData.value)); // 发送ajax请求xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {//创建blob对象const blob = new Blob([xhr.response], { type: 'application/json' });//创建下载元素const downloadElement = document.createElement('a');// 创建下载的链接const href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = 'TMApi接口文档.docx'; // 下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); // 点击下载document.body.removeChild(downloadElement); // 下载完成移除元素window.URL.revokeObjectURL(href); // 释放掉blob对象}}}

更多推荐

文件下载(使用xhr)

本文发布于:2023-11-16 09:17:44,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1616279.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:文件   xhr

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!