使用vue-print-nb实现打印，radio样式修改

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实现打印功能的两种方法（参考）