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

4个回答

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

ancong01
初学者的浅谈 我想的是 将base64传到服务器,后台生成一张图片把地址给我下载下来,但是遇到一个问题 后台解析base64 报格式错误
一年多之前 回复

试试这样

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

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

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

yanzhi_2016
yanzhi_2016 后台返回的是相对路径吧?手机端可以通过a标签直接下载吗?我写的不能下载呀
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐