使用vue-print-nb实现打印,radio样式修改
1.需求:使用A3纸打印试卷,选择使用vue-print-nb实现页面打印(修改后的图片效果)2.问题:单选题/radio的样式html页面样式显示正常,但是打印预览时页面样式显示错位3.解决办法:修改radio显示标签print.vue(页面标签)<!-- 打印显示会错位 --><!-- <el-radio-group v-if="questionItem.questio
·
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(补充)
更多推荐
已为社区贡献3条内容
所有评论(0)