背景：在实际生产中，程序员会遇到导出图片的需求，通常情况下，前端工程师只要将页面上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', true, true)  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)}

最后，完成！