直接通过点击事件调用方法
<template>
<div>
<div></div>
<div id="print-area"> ....所有内容...吧啦吧啦</div>
</div>
</template>
方法：
function printdiv() {
var headhtml = "<html><head><title></title></head><body>";
var foothtml = "</body>";
// 获取要打印的div中的html内容
var printContents = document.getElementById('print-area').innerHTML;
// 获取原来的窗口界面body的html内容，并保存起来
var oldhtml = document.body.innerHTML;
// 给窗口界面重新赋值，赋自己拼接起来的html内容
document.body.innerHTML = headhtml + newhtml + foothtml;
// 调用window.print方法打印新窗口
window.print();
// 打印完一定要重新加载窗口，因为vue的方法挂载不上去，所有事件都会失效
window.location.reload()
// 将原来窗口body的html值回填展示
document.body.innerHTML = oldhtml;
return false;
}注意：
你以为这就完事了？有隐藏的bug的！！！
- 首先是写在代码里的打印完发现按钮事件都失效，需要重新执行window.loaction.reload()；
- 我在打印的时候发现只打印一页，不完整，打印预览页面也不能滚动，因为是内网开发，没法给大家做展示！后来通过查资料发现，是因为全局样式中body,html的overflow:hidden，需要改成overflow:visible值，改完发现立马好了！
- 我提到了，全局样式！这个是不能随意修改的，于是乎，我在想在单页面里能不能修改样式，而且不能影响其他页面，于是在scoped里写了body,html{overflow:visible}，没有生效。原因请移步这里：http://t.csdn.cn/mHXE5。原因找到了，于是我就想通过js在进页面的时候给body，html设置overflow样式，离开页面的时候改回hidden。
created(){ // 获取body、html节点style（主要是这里html，一开始不清楚获取方式） let bodyStyle = document.body.style let htmlStyle = document.getElementsByTagName('html')[0].style // 重置body宽度 bodyStyle.overflow = 'visible' // 重置html宽度 htmlStyle.overflow = 'visible' } ...... beforeDestory(){ let bodyStyle = document.body.style let htmlStyle = document.getElementsByTagName('html')[0].style bodyStyle.overflow = 'hidden' htmlStyle.overflow = 'hidden' } // 如果是keepalive包裹的页面，需要分别在actived和deactived中设置样式！！！很重要
参考文献：
打印局部内容参考：http://t.csdn.cn/KGNs1
只打印一页参考：http://t.csdn.cn/9hsSo
通过js修改样式参考：http://t.csdn.cn/QSJp5
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
