DataUri js实现文件下载

项目中用到了二维码点击下载,下面是实现方式
html

下载二维码

js

          //dataURI 转换为对应Blob
          function dataURItoBlob(dataURI, dataTYPE) {
            var binary = atob(dataURI.split(',')[1]), array = [];
            for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
            return new Blob([new Uint8Array(array)], {type: dataTYPE});
            }
            //使用Blob进行下载
            function createAndDownloadFile(fileName, uri) {
            var aTag = document.createElement('a');
            var blob = dataURItoBlob(uri,'png');
            aTag.download = fileName;
            aTag.href = URL.createObjectURL(blob);
            aTag.click(); 
            URL.revokeObjectURL(blob);
            }
           //点击事件
            $("#qrbtn").click(function(){
            var url = $("#qrbtn").attr('data-url');
            var title = $("#qrbtn").attr('data-url-title')+'.png';
            $.ajax({ 
            url:"后台接口地址" , 
            data: {'url':url},
            success:function(res){ //res为后台返回的DATAURI
                createAndDownloadFile(title,res);
            }
            })
            })

php 用到了endroid/qrcode,请使用composer 加载

 public function qr(){
            $url = $this->request->get("url",'','string');
            if($url){
                $qrCode = new QrCode($url);
                $qrCode
                    ->setSize(300)
                    ->setWriterByName("png")
                    ->setMargin(10)
                    ->setEncoding('UTF-8')
                    ->setErrorCorrectionLevel(ErrorCorrectionLevel::HIGH)
                    ->setForegroundColor(['r' => 0, 'g' => 0, 'b' => 0])
                    ->setBackgroundColor(['r' => 255, 'g' => 255, 'b' => 255])
                ;
                return $qrCode->writeDataUri();
            }
            return false;
        }

参考链接
https://stackoverflow.com/questions/12168909/blob-from-dataurl
https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/