1.需求:使用A3纸打印试卷,选择使用vue-print-nb实现页面打印(修改后的图片效果)

2.问题:单选题/radio的样式html页面样式显示正常,但是打印预览时页面样式显示错位

3.解决办法:修改radio显示标签

print.vue(页面标签)

               <!-- 打印显示会错位 -->
               <!-- <el-radio-group v-if="questionItem.questionType == 1 || questionItem.questionType == 3">
                <el-radio type="radio" :label="detail.prefix">
                  <div v-html="detail.content"></div>
                </el-radio>
              </el-radio-group>  -->

              <!-- 打印显示正常 -->
              <div class="classRadioType" v-if="questionItem.questionType == 1 || questionItem.questionType == 3">
                <input class="classRadio" type="radio" :name="detail.prefix">
                  <div v-html="detail.content"></div> 
              </div> 

print.vue(打印样式)

.classRadioType{
    display: flex;
    font-size: 14px;
    .classRadio{
      display: none;
    }
  } 
  @page {
    padding: 35px 0px; 
  }
  @media print {
    .el-radio__input,.el-checkbox__input{
      display: none !important;
    }
    .el-radio__label,.el-checkbox__label{
      div{
        color: #000;
        p:nth-of-type(2){
          display: none !important;
        }
      }
    }
  }

printarea.js

// 处理input框
      if (item.tagName === 'INPUT') {
        // 除了单选框 多选框比较特别
        if (typeInput === 'radio' || typeInput === 'checkbox') {
          copiedInput.setAttribute('checked', item.checked);
          // 
        } else {
          copiedInput.value = item.value;
          copiedInput.setAttribute('value', item.value);
        }
        // 处理select
      } else if (typeInput === 'select') {

        selectCount++;
        for (let b = 0; b < ele.querySelectorAll('select').length; b++) {
          let select = ele.querySelectorAll('select')[b]; // 获取原始层每一个select
          !select.getAttribute('newbs') && select.setAttribute('newbs', b) // 添加标识
          if (select.getAttribute('newbs') == selectCount) {
            let opSelectedIndex = ele.querySelectorAll('select')[selectCount].selectedIndex;
            item.options[opSelectedIndex].setAttribute('selected', true);

          }
        }

总结:我理解的是printarea.js中处理radio样式的时间是根据tagName类型做的判断,但是之前使用的el-radio的标签上找不到INPUT属性,所以没有处理成功,可能理解不一定很正确,欢迎小伙伴指教!

tagName(补充)

vue-print-nb实现页面打印

vue实现打印功能的两种方法(参考)

 

Logo

前往低代码交流专区

更多推荐