直接调用浏览器的打印功能，打印整个页面
function preview () { window.print(); }
通过开始标记、结束标记来打印，打印局部页面
<!--startprint--> <div> 打印的内容 </div> <!--endprint-->
function preview () { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符 eprnstr="<!--endprint-->"; //结束打印标识字符串 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容 window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML window.print(); //调用浏览器的打印功能打印指定区域 window.document.body.innerHTML=bdhtml;//重新给页面内容赋值； return false; }
注意：1.如果你要打印的区域中包含vue赋值对象，那你的开始结束标志符需要放在实例化VUE绑定的ID外，如下，vue实例化绑定的是ID“#content”，那么标识符就要放在“#content”元素外
2.打印的这个函数，调用方式不能用vue的@click来调用，请用js的onclick来调用，函数允许放在vue的methods中，调用：onclick="vm.preciew()"，这是为什么呢？因为函数中的最后，我们重新给指定的区域赋值，如果是@click，重新赋值就不能给按钮再次绑定上点击事件，原生的点击事件重新赋值是能够重新绑定上去的
当然，你如果只是用到js或者jquery，那么，你将不用考虑上面这两个问题。
<style media="print"> @page { size: auto; /* auto是初始值 */ margin: 0mm; /* 这会影响打印机设置中的边距 */ } </style>
原文：https://www.cnblogs.com/chensv/p/12027759.html