有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js base64(原生Javascript实现下载base64图片)

javascript 炮渣日记 4周前 (11-13) 16次浏览 已收录 0个评论 扫描二维码

背景:在实际生产中,程序员会遇到导出图片的需求,通常情况下,前端工程师只要将页面上canvas转成base64的字符串,通过调用后端接口,将base64的字符串上传,由后台工程师生成文件。但是,遇到刚入门的菜鸟后端时,这一切就不是那么顺利了。俗话说,求人不如求己,靠人不如靠己。这点小功能,前端工程师通过base64转Blob的方式也可以做到。

下面直接上代码:

第一步:先把base64字符串转成Blob文件

const base64ToBlob = (code) => {
  const lists = code.split(';base64,')
  const contentType = lists[0].split(':')[1]
  const raw = window.atob(lists[1])
  const rawLength = raw.length
  const arraryBuffer = new ArrayBuffer(rawLength)
  let uInt8Array = new Uint8Array(arrayBuffer)
  for(let i = 0; i < rawLength; i++) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], {type: contentType})
}

第二步:通过生成a标签,设置a标签的href属性,模拟点击事件触发下载功能

const downloadFile = (content, fileName) => {
  const aLink = document.createElement('a')
  const blob = base64ToBlob(content)
  const evt = document.createEvent('HTMLEvents')
  evt.initEvent('click'truetrue)
  aLink.download = fileName // 设置下载文件名称
  aLink.href = URL.createObjectURL(blob)
  const options = {
    bubbles: true,
    cancelable: true,
    view: window
  }
  const mouseEvent = new MouseEvent('click', options)
  aLink.dispatchEvent(mouseEvent)
}

最后,完成!

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址