美文网首页
vue单页面使用window.print()多张打印

vue单页面使用window.print()多张打印

作者: 刘圣凯 | 来源:发表于2020-04-21 19:45 被阅读0次

因为项目使用了侧边菜单,在vue单页面中无法精准控制打印的数据,总是会把侧边栏给一起打印出来, 所以使用原生的方式,生成一个新的窗口去打印, 实例如下

 let htmlStr = `
                 <div style="page-break-after:always;">第一页</div>
                 <div style="page-break-after:always;">第二页</div>
               `
 let newWin = window.open(""); //新打开一个空窗口
 let imageToPrint = document.getElementById('print'); //将要被打印的图片
 newWin.document.write(htmlStr); // 打印内容
 newWin.document.close(); //在IE浏览器中使用必须添加这一句
 newWin.focus(); //在IE浏览器中使用必须添加这一句
 setTimeout(function() {
   newWin.print(); //打印
   newWin.close(); //关闭窗口
 }, 100);

div中的行业样式 page-break-after:always 会在元素后插入分页符,以此达到多张打印的效果。

相关文章

  • vue单页面使用window.print()多张打印

    因为项目使用了侧边菜单,在vue单页面中无法精准控制打印的数据,总是会把侧边栏给一起打印出来, 所以使用原生的方式...

  • window.print()打印功能

    项目使用 Vue + ant Design Vue,要添加表单的打印功能,如果直接使用 window.print(...

  • window.print 打印单页或者多一页的 问题解决方法

    问题一 项目使用window.print() 打印预览只有一页答案:把你app.vue中和页面中的 over...

  • vue实现打印功能

    打印功能可以自己使用原生js(window.print())实现,其次就是使用插件,介绍一个打印插件 vue-pr...

  • JS实现页面打印

    方式一:window.print() 整体打印 现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要...

  • vue.js页面打印window.print

    在项目中,涉及到了html内容打印的需求,调用了浏览器的window.print用于打印,涉及到的问题有需打印in...

  • vue 打印

    JS原生有自带的window.print打印方法,这里是个vue打印的插件,用于打印,简单,快速,方便,轻便的指令...

  • 使用window.print()打印指定的一个vue 组件

    在想打印一个webd页面的时候,会用到window.print()。默认会打印当前document内容,样式/图片...

  • js打印

    什么都不说,先上个图。 一. window.print()# window.print();会弹出打印对话框,打印...

  • 打印jQuery.print.min.js 使用总结

    项目中遇到打印报表的要求,需要只打印报表部分而不是整个页面,一般直接调用系统的方法window.print(),会...

网友评论

      本文标题:vue单页面使用window.print()多张打印

      本文链接:https://www.haomeiwen.com/subject/fdgpihtx.html