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

1.如何打印内容

html部分

<div ref="pdfDom">
  xxxxxxx
  xxxxxx
    //打印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框中存的框的内容会消失，这里需要在跳转前进行数据重新存储一下
 


 作者：de_self
 链接：https://www.jianshu.com/p/301e5f716ad9
 来源：简书
 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
                        原文链接：https://www.jianshu.com/p/301e5f716ad9
                                    网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样
这里是看到了两个源码
https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js
https://github.com/denghao123/Print.js
以下是我修改过的
print.js
// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
 if (!(this instanceof Print)) return new
                                    利用页面布局设置制作工资条(不用函数)彭怀文第一节和第二节分别讲了使用函数或排序的办法，将工资表转化工资条，但是美中不足的是标题行只能是单标题行，对于多标题行或者含有合并单元格的标题行却没有办法解决。下面介绍一种利用Excel页面布局设置的功能来解决该问题。一、使用该办法的前提条件(一)该办法生成的工资条是用平推式针式打印机打印平推式针式打印机是一般企业都有，因为开具机打的增值税专用发票...
本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个
https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈
安装 npm install vue-print-..
 <!-- 打印机按钮开始 -->       
 <div style="position: absolute;top:100;right:0px;z-index: 9999;background-color:#EDEDED">                   
2.详细代码如下
<!-- 标签弹窗 -->
	<Modal width="250" :mask-closable="false" v-model="modalShow" title="标签打印">
      <Table stripe :columns="modal_title" :data="modal_data"></Table>
                                    前端控制打印有些细节需要注意：分页、隐藏打印按钮、页面边距、页面方向等，本文一一道来
文章目录一、JS 调用示例1. 打印整个页面2. jQuery 打印局部二、Bootstrap 打印类三、CSS 打印属性1. page-break-before2. page-break-after3. page-break-inside4. orphans5. widows6. 控制边距四、参考手册
一、...