PC端下载文件到本地

最新更新时间：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-5134bc3e58c0var a = document.createElement('a')a.href = urla.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);

参考资料

createObjectURL
File
Blob
MediaSource
XMLHttpRequest
使用 JavaScript 创建并下载文件
前端生成文件并下载

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

`打赏我吧^-^`

PC端下载文件到本地相关推荐

从服务端下载文件到本地windows
之前常使用本地ubuntu和远程的centos服务器或者是本地mac和远程centos服务器通过命令scp或者nc来进行文件的传输. 现在用的是windows系统,欲将服务器的某文件load到本地. ...
pc端下载图片到本地兼容IE
参考纯javascript前端实现base64图片下载(兼容IE10+) 背景管理后台PC端生成一个二维码,用户需要下载到本地打印出来,用于收费思路 1.接口取到二维码(二维码图片最好是base ...
Android之解决PC端上传http表单格式文件手机解析文件名乱码问题和PC浏览器下载文件的文件名显示乱码问题
1 问题问题1. 手机写socket作为服务器,PC浏览器上传http表单格式文件,然后手机端解析携带中文的文件名我解析是乱码. 问题2. 手机写了socket作为服务器,PC浏览器下载文件,但是浏 ...
多平台视频PC端下载(持续更新，windows)
多平台视频PC端下载(持续更新,windows) 说明:仅供学习交流使用,请勿用于商业用途,如有侵权,请联系删除!使用过程中请尊重版权! 文中所用的视频下载器不止用于单一平台,大部分支持多平台,可自行 ...
xshell下载mysql到本地文件_在Xshell中上传下载文件到本地（linux中从多次ssh登录的dbserver里面的文件夹）-Go语言中文社区...
在Xshell中上传下载文件到本地(linux中从多次ssh登录的dbserver里面的文件夹) 1 列出所有需要copy的sh文件 -bash-4.1$ ll /mysqllog/osw/*.sh ...
Unity3D 网页插件Embedded Browser(ZFBrowser)PC端打包文件无法加载网页解决方法
网页插件Embedded Browser(ZFBrowser)PC端打包文件无法加载网页介绍:使用Embedded Browser开发unity项目内嵌网页,打包后发现出现一个问题网页插件无响应,而 ...
微信小程序 - 下载文件到本地、打开文档
前言需求场景描述:接口获取到服务器的文件地址,然后在小程序中下载文件到本地手机上.根据文件格式,下载类型分为下面四种情况: 下载图片到本地下载视频到本地打开文档,支持格式:doc, xls, p ...
小程序配置阿里云OSS下载文件，在请求头里配置生成强制下载链接，（拿到下载链接可以下载文件至本地）
小程序配置阿里云OSS下载文件,在请求头里配置生成强制下载链接,(拿到下载链接可以下载文件至本地)(Win10电脑开发环境)**这里只说明小程序端问题**<菜鸡总结大神勿喷!蟹蟹~> 大体 ...
在通用计算机内pc是指什么地方,电脑版微信保存的文件在哪里?PC端微信文件保存位置是什么?...
随着微信越来越融入大家的生活,大家越发依赖微信,人们在微信中进行大量私人社交.办公等行为:聊天.接收文件等.无法使用手机时人们需要用到电脑版微信,在电脑版微信里,接收文件之后如何找到文件的保存位置?P ...

PC端下载文件到本地

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

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

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

以生成一个json文件为例

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

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

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

createObjectURL

参考资料

`打赏我吧^-^`

PC端下载文件到本地相关推荐

最新文章

热门文章