场景描述

在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)
    }
  })
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐