美文网首页
vue.js页面打印window.print

vue.js页面打印window.print

作者: de_self | 来源:发表于2019-08-08 09:53 被阅读0次

在项目中,涉及到了html内容打印的需求,调用了浏览器的window.print用于打印,涉及到的问题有需打印input内容缺失,网页显示不全,页眉页脚显示问题

1.如何打印内容

html部分

<div ref="pdfDom">
  xxxxxxx
  xxxxxx
<div>

js部分

    //打印dom的内容
    printDomVal(){
      //获取要打印的Dom内容
      let newDomHtml = this.$refs.pdfDom.innerHTML;
      //将要打印的html赋给本页面
      window.document.body.innerHTML = newDomHtml;
      //调用windos的打印接口
      window.print();
      window.location.reload();   //解决打印之后按钮失效的问题,刷新页面
      return false;
    },
显示不全问题

由于window.print是1:1打印,打印内容过宽时,浏览器会自动从左截取掉超宽部分,因此在打印前需将页面进行调整
打印页边距设定为 0mm 时,网页内最大元素的分辨率:794×1123
因此我将内容div设置为700px,剩余空间设置为页边距

页眉页脚问题

由于window.print打印自带页眉页脚,用于存放打印url,日期时间,页面名称等内容,为屏蔽这些内容可使用css进行屏蔽

@page{
  margin:0;
  //控制是使用a4还是使用其它纸张规格
  size:auto;
}

我只屏蔽了页脚

@page { margin-bottom: 0; }
解决input内容为空的问题
image.png

在打印页面涉及到了要打印input框,但跳转至打印页面时,原input框中存的框的内容会消失,这里需要在跳转前进行数据重新存储一下

相关文章

  • vue.js页面打印window.print

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

  • JS实现页面打印

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

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

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

  • js打印

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

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

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

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

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

  • React实现局部HTML打印实践遇到的一些问题

    我们知道浏览器有一个window.print()可以调起浏览器自带的打印页面的功能,它会把当前文档的body生成一...

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

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

  • vue 打印

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

  • 前端打印

    使用window.print()打印 优点1.通过简单的代码就能调用打印机2.可以打印网页中任何内容 缺点不能调整...

网友评论

      本文标题:vue.js页面打印window.print

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