js将图片/文件等资源保存(下载)到本地
js将图片/文件等资源保存(下载)到本地。
·
场景描述
在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) return
try {
let blob
const 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)
}
})
}
更多推荐
已为社区贡献7条内容
所有评论(0)