场景描述

在web中难免会有需要将图片、文件、视频等保存\下载到本地的场景，可以通过blob+a元素搭配实现此功能（适合小文件，不支持大型文件）

实现方法

/**** @param {string|Blob|Array} data 数据源，可以是图片的base64、File等* @param {string} name 文件名* @param {object} options* @param {string} options.type MIME类型，尽量传入正确的类型* @param {string} options.encode 字符编码类型* @param {boolean} options.timestamp 是否在文件名后追加时间戳*/
function download(data,name = '',{ type = 'text/plain', encode, timestamp = false } = {}
) {return new Promise((resolve, reject) => {if (!data) returntry {let blobconst a = document.createElement('a')a.style.display = 'none'a.download = name + (timestamp ? `_${Date.now()}` : '')if (/^https?|ftp|data:/.test(data)) {a.href = data} else {blob =data instanceof Blob? data: new Blob(data instanceof Array ? data : [data], {type: type + (encode ? ';charset=' + encode : '')})a.href = URL.createObjectURL(blob)}setTimeout(() => {a.click()setTimeout(() => {a.remove()resolve()if (blob instanceof Blob) {setTimeout(() => {URL.revokeObjectURL(blob)}, 1000)}}, 1)}, 0)} catch (error) {reject(error)}})
}

js将图片/文件等资源保存(下载)到本地相关推荐

JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)
场景简介由于业务需要,经常遇到下载各类文件的需求,其中最头疼的莫过于前端下载图片了,直接给个图片文件地址会变成直接打开图片,而不是弹窗提示另存为,研究了下前端实现文件下载最便捷的方法还是创建 a 标 ...
.Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
JS实现常见文件类型的下载/保存
前端做下载功能是很常见的,类型也是多样,比如下载图片,a标签模拟下载本地静态资源,或者线上下载blob对象,或者js生成csv文件再下载等. 前面的博客笔者主要记录了使用JS-XLSX插件下载表格,今 ...
前端JS获取图片文件的真实格式
目录常见方式判断图片格式图像数据简单说明 JS读取图片真实格式 svg格式的判断总结前面博文有提到,当前主流浏览器能支持的图片格式,是七种:jpg.png.gif.bmp.ico.webp.s ...
vue——js实现图片/文件的拖拽上传（复制粘贴就能用，还有优化空间）
首先先创建元素容器 <template><div id="drop"><span v-show="isUpload" class= ...
java的图片文件上传下载，多表新增，菜品信息分页
上传文件:表单要求 1,enctype="multipart/form-data" 2.表单中需要有type="file"的input 3.表单的请求方式一定是 ...
html加载文件流图片,js 读取图片文件流显示到页面上
thisimg=$("文件域"); src=$("图片标签"); function readAsDataURL(thisimg,src){ //检验是否为图像文 ...
Jsoup爬取网络内容（包括图片文件），保存到本地和保存到数据库（一）
背景: 项目需要某个区县的天气数据,需要从中国气象局的官网中进行爬取.但是,中国气象局服务器调用接口返回的数据没有我想要的信息,比如说是未来24小时的天气温度,气压,风速等信息,这些数据接口中都没有, ...
超详细：Java 读取 Windows 共享文件夹中的文件，并下载到本地电脑中
目录 JCIFS 介绍 SMB协议设置共享文件夹(这里我们选择有密码的方式进行共享) 是否设置密码创建 smb 协议测试使用代码将文件夹里的文件下载到本地项目常常需要有访问共享文件夹的需求, ...

js将图片/文件等资源保存(下载)到本地

场景描述

实现方法

js将图片/文件等资源保存(下载)到本地相关推荐

最新文章

热门文章