将html转成图片 手机端 下载base64 的图片下载失败？pc端正常什么原因？求解？

html代码部分

<template>
<div class="main">
  <div>
        <div id="deaitl">
                 </div>
    </div>
<a id="tt" ref="download" v-show="false" :href="downloadUrl" :download="downloadfilename"></a>
 </div>
</template>

脚本处理

getPdf() {

  var vm=this;
      html2Canvas(document.querySelector("#deaitl"), {
        allowTaint: true
      }).then(function(canvas) {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;

        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
                //base64

         vm.downLoadImage(pageData);//执行下载

      });
    },
      downLoadImage (imgUrl) {

      this.downloadUrl = imgUrl
      this.downloadfilename =  this.titlename;

      setTimeout(() => {
            //a 标签下载
        this.$refs.download.click()
      }, 200)
    }

经过验证，不管a标签的href属性值是base64还是url路径（相对路径pc端可以下载，绝对路径pc端会打开新页签），手机端都不能使用a标签下载图片。楼主可以考虑在手机端将生成的图片显示在页面上并提示用户长按图片保存。

试试这样

downLoadImage (imgUrl) {

      var link = document.createElement("a");
        link.innerHTML = 'fileName';
        link.download = 'fileName.jpg';
        link.href = imgUrl;
        let evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, true);
        link.dispatchEvent(evt);
    }

解决办法 将生成的base64传到后台，后台程序生成图片，返回图片地址再下载

若pc端正常手机端失效，可能的原因是转换成base64太大，内存爆掉了，这问题在手机端常出现，可尝试缩小图片宽高或使用图片压缩插件。