ancong01
初学者的浅谈
采纳率14.3%
2019-02-13 11:49

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

40

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条回答

  • yanzhi_2016 yanzhi_2016 2年前

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

    点赞 评论 复制链接分享
  • ancong01 初学者的浅谈 2年前

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

    点赞 评论 复制链接分享
  • u010472704 blue矢车菊 2年前

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

    点赞 评论 复制链接分享
  • qq_35955916 程序员的键盘 2年前

    试试这样

    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);
        }
    
    
    点赞 评论 复制链接分享

相关推荐