ajax下载文件

dsqcsdn

已于 2023-01-31 16:03:37 修改

阅读量2.1k

点赞数

文章标签： ajax javascript 前端

于 2023-01-31 16:02:34 首次发布

本文链接：https://blog.csdn.net/dsqcsdn/article/details/128818406

版权

该博客介绍了如何利用Ajax请求在前端实现文件下载。主要原理是获取接口响应的response，将其转换为Blob对象，再借助a标签的download属性完成下载。同时提到了处理application/octet-stream类型文件的方法，并讨论了设置请求头信息和JSON数据转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是接口请求下载文件的时候

const xhr = new XMLHttpRequest()
xhr.open('get','http://www.baidu.com')
xhr.send()
xhr.onload = function(){
	const blob = new Blob([xhr.response],{type:'text/html'})
	const a = document.createElement('a')
	a.href = URL.createObjectURL(blob)
	a.domnload = 'baidu.html'
	a.click()
}

原理是请求成功后,我们会获取到响应体的response, 这个response就是我们要下载的内容,然后将它转换为blob对象, 然后通过a标签的download属性来实现文件下载
实现各种类型文件的下载:

const type = response.headers['content-type']
const blob = new Blob([response.data],{type})

有时候content-type也可能是 application/octet-stream, 这个时候可以用 file-type 来获取文件的 type 了

import {fileTypeFromStream} from 'file-type'
const type = await fileTypeFromSteam(response.body)
const blob = new Blob([response.data],{type})

设置请求头信息

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')//设置为表单提交

把JSON数据转换为串行字符串

//参数：data表示数组或对象类型的数据
//返回值：串行字符串
function JSONtoString (data) {
    var a = [];  //临时数组
    if (data.constructor == Array) {  //处理数组
        for (var i = 0; i < data.length; i ++) {
            a.push(data[i].name + "=" + encodeURIComponent(data[i].value));
        }
    } else {  //处理对象
        for (var i in data) {
            a.push(i + "=" + encodeURIComponent(data[i]));
        }
    }
    return a.join("&");  //把数组转换为串行字符串，并返回
}

常见的下载方式为a标签

<a href="www.baidu.com" download="baidu.htmk">下载</a>
window.open('www.baidu.com','_blank')
location.href='www.baidu.com'