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

Question

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)
    }

Answer 1

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