vue.js+php 实现二进制流图片数据下载到本地

思路：生成微信小程序码的时候，微信服务器返回的是图片二进制数据流，因此我们现在服务端将二进制流转换为base64进制数据流，然后返回给前端。前端将请求到的base64进制流转换进行下载。
这样可以有效避免需要通过访问图片url造成的跨域等等的一些列问题。

后端代码

这里以微信小程序码为例。其中$binary是二进制数据，$base64String为64位数据信息，其余代码根据自己需求书写

    /**
     * 生成学校小程序码的base64位数据流
     * @return \sf\ViewModel\JsonModel
     */
    public function schcodeAction()
    {
        $wx = new WeiXin(true);

        $scene = POST::Int('sch_id');  // 参数获取，自己根据自己的写
        $wxAppPage = SchoolInfo::$shareCodePage; // 自己根据自己的写
        $binary = $wx->getAppShareQR($scene, $wxAppPage); // 请求微信服务器返回的二进制流数据，请求接口自己写
        $base64String = 'data:' . getimagesizefromstring($binary)['mime'] .  ';base64,' . chunk_split(base64_encode($binary)); // 关键：：此处为二进制流转换为base64位
        return $this->GetFailJSONModel(['info'=>$base64String]); // 数据返回，自己写
    }

前端代码

html在这里就不进行书写了，理解万岁，点击事件触发download(),然后 this.codeData是请求回来的图片数据流

    // 下载图片
    download() {
      downloadFile(this.detailInfo.sch_name ? this.detailInfo.sch_name : '二维码', this.codeData)
    }

以下为封装代码，可以放在工具文件中，然后进行引入使用

/**
 * base64图片下载
 * @param {*} fileName 下载后的文件名称
 * @param {*} content 内容
 */
export const downloadFile = (fileName, content) => {
  const aLink = document.createElement('a')
  const blob = base64ToBlob(content) // new Blob([content]);

  const evt = document.createEvent('HTMLEvents')
  evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName
  aLink.href = URL.createObjectURL(blob)

  aLink.click()
}

/**
 * base64转blob
 * @param {*} code base64位码
 */
const base64ToBlob = (code) => {
  const parts = code.split(';base64,')
  const contentType = parts[0].split(':')[1]
  const raw = window.atob(parts[1])
  const rawLength = raw.length

  const uInt8Array = new Uint8Array(rawLength)

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], { type: contentType })
}