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

2022-08-16  本文已影响0人  上海_前端_求内推

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


image.png
 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);

      },
上一篇 下一篇

猜你喜欢

热点阅读