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

作者: 上海_前端_求内推 | 来源:发表于2022-08-16 17:55 被阅读0次

vue实现html2canvas截图A4纸大小并适应不同分辨率
vue页面生成pdf且避免分页截断处理
前端自适应问题
Blob文件保存
自适应和响应式的区别
在不同分辨率下实现页面缩放实现页面适配
PC/移动端布局方式
vue 实现类朋友圈浏览界面
umi开启hd后配置 px2rem
temp

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

      },