原生js打印阅览复选框不显示问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013144287/article/details/86631231

                                             原生js打印阅览复选框不显示问题

     原生js打印预览,主要是阅览时候回出现一些问题,比如复选框传值,√不显示,那么怎么来解决这个问题呢?首先我们看一下效果图:我的页面是vue环境

 这是预览状态,√和元页面一致,已经传过来了,首先原生js打印阅览指定区域是怎么做的呢?

一、html部分

<div class="PropertyReport" id="subOutputRank-print">
   省略...........................省略
</div>

二、js,调用改方法即可

doPrint(e) {
      let subOutputRankPrint = document.getElementById('subOutputRank-print')
      let newContent = subOutputRankPrint.innerHTML
      let oldContent = document.body.innerHTML
      document.body.innerHTML = newContent
      window.print()
      window.location.reload()
      document.body.innerHTML = oldContent
      return false
    }

以上两部即可以实现预览打印了。

三、解决复选框√问题

1、html

<div style="display: flex;margin-left: 5px">
                    <input type="checkBox" v-model="checkedReceipt" id="CheckQdsf" style="margin-top:2px;width: 14px; height: 14px"><div style="margin-top: 1px;margin-left: 5px">签单收费</div>
                  </div>

2、js写法

document.getElementById('CheckQdsf').setAttribute('checked', 'checked')

需要用这种方式来设置值才来显示,vue组件或者input绑定值在阅览时候都是无法显示的。

四、最后如果不想要阅览顶部和底部的文字只需要点击阅览左边设置即可,如图所示:

这样就ok

 

展开阅读全文

没有更多推荐了,返回首页