ant-design-vue 关于vue的简易的局部打印方式,包括样式

没有使用插件,用原生js实现,效果为使用s-table,选中要打印的数据,点击打印,达到打印的效果,去掉一些操作按钮等

1.现在要打印的dom节点前后加一个唯一的便签标识:

 <custom-print>
        <style>
//此为打印的css样式,需要写在自定义标签custom-print的里面
          @media print {
//操作按钮隐藏
          .danger-link{display: none;}
          input {display: none;}
          table tr {display: none;}
//表头显示
          table tr:first-child {display: table-row;}
//表头"操作" 列隐藏
          table tr:first-child  th:last-child{display: none;}
//此处为table 所选中的列,才打印,选中时需要把对应的列增加selected-print 的class
//ant 里面是 :row-class-name="setClassName"
          table .selected-print{display:table-row;}
//此处使用了插件的expandedRowRender,所以selected-print的下一行也需要显示并打印
          table .selected-print + tr {display:table-row!important;}
          }
        </style>
.....
//具体的html片段
</custom-print>

2.触发打印方法

    handlePrint () {
      const bdhtml = window.document.body.innerHTML
//获取custom-print 标签内的所有html代码
      const prnhtml = bdhtml.replace(/^[\s\S]*<custom-print(.*?)>([\s\S]*)<\/custom-print>[\s\S]*$/, '$2')
      var newWin = window.open('')// 新打开一个空窗口
      newWin.document.body.innerHTML = prnhtml
      newWin.document.close()
      newWin.focus()
      newWin.print()
      newWin.close()
    }

打印的时候只是略做了样式的调整,当然如果对样式有别的要求,可以自定义一个其他的template渲染,打印的时候打印对应的模板即可.

 

ps: console会有个报错,说识别不了custom-print,未处理,随便编的一个标签,肯定识别不了,需要跳过vue的编译

参考文章:

js打印网页的特定内容三步搞定

来源：oschina

链接：https://my.oschina.net/u/2430931/blog/3160071