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

怼烎@ 2022-04-23 06:48 543阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70][]

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

一、html部分

二、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

2、js写法

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70 1][]

这样就ok

![20190124182407206.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70]: /images/20220323/d052e14582c54045a20b6b203fabb63f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70 1]: /images/20220323/028f8515343341498477665299aa2604.png
[20190124182407206.jpg]: /images/20220323/54cd11287bcf4b54914b6c55498c1f2b.png