PC端下载文件到本地

最新推荐文章于 2024-01-10 10:20:02 发布

万少博

最新推荐文章于 2024-01-10 10:20:02 发布

阅读量1k

点赞数

分类专栏：文件操作

本文链接：https://blog.csdn.net/wanshaobo888/article/details/108467485

版权

文件操作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最新更新时间：2021年08月12日14:42:40

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

本文内容：前端开发过程中，经常会遇到下载文件到本地的需求，用户点击一个按钮，浏览器会将文件下载到电脑本地，比如下载word、excel、ppt。下载文件有两种方案：前端生成并下载、后端生成传递给前端

在前端生成文件并下载到本地

以生成一个json文件为例

downloadFile = () => {
   const obj = { name:[{key:'1', value:'2'}] };
   const element = document.createElement('a');
   element.setAttribute('href', 'data:json/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(obj,null,2)));
   element.setAttribute('download', 'test.json');
   element.click();
 };
 
downloadFile = () => {
   const obj = { name:[{key:'1', value:'2'}] };
   const element = document.createElement('a');
   var blob = new Blob([JSON.stringify(obj,null,2)], {type: 'text/plain'});//使用 Blob 构造函数将文件内容编译为指定格式的二进制
   element.download = 'test.json';
   element.href = URL.createObjectURL(blob);//Blob 对象作为 Url 也赋给 a 标签
   element.click();
   URL.revokeObjectURL(blob);//回收内存
};

注意：JSON.stringify(obj,null,2)，会将单行json字符串格式化(增加换行符和缩进符)写入文件，2表示缩进2个空格

从前端下载在后端生成的文件

网站和被下载的资源没有跨域

可以借助 a 标签的 download 属性

按照文件的默认名称下载，不需要给download赋值

<style>
    a{
        text-decoration:none;
        color: black;
    }
</style>
<body>
	<a href="../file/bg.jpeg" download>点击下载</a>
</body>

下载过程中给文件重命名，需要给download赋值，这个值是文件的名称

<style>
    a{
        text-decoration:none;
        color: black;
    }
</style>
<body>
	<a href="../file/bg.jpeg" download="图片">点击下载</a>
</body>

网站和被下载的资源产生跨域

如果被下载的资源和网站的URL产生跨域，采用上面的方案，点击a标签的下载按钮会直接打开这个文件，而不是下载这个文件到本地

采用创建同域url的方式

<li onClick={() => {downloadFile(url, fileName)}}>点击下载</li>

function downloadFile(url, fileName) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = 'blob';
	xhr.onload = function(e) {
		//xhr.response  Blob {size: 35328, type: "application/msword"}
		var url = window.URL.createObjectURL(xhr.response);//blob:http://localhost:3001/82ef3951-aba0-4d89-9f0d-5134bc3e58c0
		var a = document.createElement('a')
		a.href = url
		a.download = fileName;
		a.click()
	}
	xhr.send();
}

xhr.responseType

responseType支持以下几种值	说明
“”	responseType 为空字符串时，采用默认类型 DOMString，与设置为 text 相同
arraybuffer	response 是一个包含二进制数据的 JavaScript ArrayBuffer
`blob`	`response 是一个包含二进制数据的 Blob 对象`
document	response 是一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型。请参阅 XMLHttpRequest 中的 HTML 以了解使用 XHR 获取 HTML 内容的更多信息
json	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的
text	response 是一个以 DOMString 对象表示的文本
ms-stream	response 是下载流的一部分；此响应类型仅允许下载请求，并且仅受 Internet Explorer 支持

createObjectURL

参数 object 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值 一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。

objectURL = URL.createObjectURL(object);

参考资料

感谢阅读，欢迎评论^-^

`打赏我吧^-^`

万少博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录