vue实现html2canvas截图A4纸大小并适应不同分辨率

html2canvas截图时如果设置固定宽度或者设置为div的宽度,直接打印时没有问题,但是画布截图的范围会超出a4纸大小,所以这是就需要让画布的宽度根据分辨率动态设置

vue实现html2canvas截图A4纸大小并适应不同分辨率

 savebutton() {
        this.printstate=true
        this.loading=true
        // console.log(this.form)
        var dataform = {}
        dataform = this.form.head
        // var arr1=[]
        // arr1.push(this.form.arr)
        dataform.jsonStr = JSON.stringify(this.form.arr)
        dataform.UserCode=localStorage.getItem("ms_loginUserCode")
        dataform.UserName=localStorage.getItem("ms_loginUsername")
        setTimeout(() => {
          var canvaswidth=840
          if(document.body.scrollWidth>=1360&&document.body.scrollWidth<1440){
            canvaswidth=canvaswidth*1.5
          }else if(document.body.scrollWidth>=1440&&document.body.scrollWidth<1600){
            canvaswidth=canvaswidth*1.4
          }else if(document.body.scrollWidth>=1600&&document.body.scrollWidth<1680){
            canvaswidth=canvaswidth*1.2
          }else if(document.body.scrollWidth>=1680&&document.body.scrollWidth<1920){
            canvaswidth=canvaswidth*1.1
          }else if(document.body.scrollWidth>=1920){
            canvaswidth=canvaswidth*1
          }
        html2canvas(this.$refs.printContent, {
          allowTaint: false,
          useCORS: true,
          height: this.$refs.printContent.outerHeight,
          width: canvaswidth,
          windowWidth: document.body.scrollWidth,
          windowHeight: document.body.scrollHeight,

        }).then((canvas) => {
          var urlimg = canvas.toDataURL( image/jpeg )
          // 
          var st = urlimg.indexOf( , );
          var stnew = parseInt(st) + 1;
          urlimg = urlimg.substring(stnew);
          // 
          var urllist = {}
          urllist.BaseStr = urlimg
          dataform.imgBase = []
          dataform.imgBase.push(urllist)
          dataform.imgBase = JSON.stringify(dataform.imgBase);
          this.$axios({
            method: "post",
            url: this.$baseService.savecontent,
            data: dataform,
          })
            .then((res) => {
              this.printstate=false
              this.loading = false;
              this.dialog = false;
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.$emit( childEvent );
              this.title = "编辑";
            })
            .catch((res) => {
              this.loading = false;
              this.$message.error("网络错误,请联系管理员");
            });
        })
        
 }, 1000);

      },

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容