vue项目浏览器弹框打印功能实现
前言
浏览器自带打印功能，一般右键，点击打印就能调起浏览器打印功能，不过这是打印的内容是浏览器当前界面的内容。现在项目中需要点击界面打印按钮，跳出弹框，然后点击打印，可直接调起浏览器打印。下面为弹框打印方案的具体实现。
实现的整体效果如下
点击打印按钮，跳出打印弹框
当打印内容很多，或者需要分页，弹框会出现滚动条，防止弹框高度太高，但打印内容会是弹框内所有内容 点击直接打印，就直接吊起浏览器打印功能弹框
具体实现步骤
弹框打印功能主要是基于vue-print-nb插件实现
- 下载vue-print-nb依赖
npm i vue-print-nb
- 在main.js中引用
import Print from 'vue-print-nb'
Vue.use(Print)
3、创建弹框内容
<!--打印按钮，触发弹框-->
<el-button @click="printVisible=true">打印<el-button>
<!--打印-->
<el-dialog title="放车单" :visible.sync="printVisible">
<!-- startprint -->
<div class="box">
<div id="printMe" class="printMe" v-if="printVisible">
<OutPutPrint :vehicleId="carInfo.vehicleId"></OutPutPrint>
</div>
</div>
<!-- startprint -->
<div style="text-align: right;">
<el-button v-print="printObj" type="primary">直接打印</el-button>
<el-button @click="printVisible = false">取消</el-button>
</div>
</el-dialog>
<script>
export default {
data () {
return {
printObj: {
id: 'printMe',
popTitle: '打印',
openCallback: (e) => {
this.printVisible = false
},
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
},
}
OutPutPrint为具体打印内容模板，这个可按实际情况编写 到此，点击打印按钮，跳出弹框，然后点击直接打印，就可以实现基本打印功能
问题1：由于打印内容过多，弹框被撑的很高，很不美观，所以我们引入一下样式
.box {
height: 600px;
overflow-y: scroll;
}
.printMe {
height:auto;
}
我们引入一个.box的div，来控制弹框的高度，设置一个定高，是弹框始终按我们想要的高度展示，超过部分滚动展示。然后给具体需要打印的内容加一个样式使其高度自适应，这样点击直接打印时，我们就能完成的获取滚动下的所有内容了。
问题2：当我们点击直接打印，跳出浏览器打印弹框，点击打印后需要做一个回调，更改我们数据的打印状态，这里vue-print-nb插件封了一个打印功能弹框打开的一个回调方法，我们用openCallback这个方法实现
export default {
data () {
return {
printObj: {
id: 'printMe',
popTitle: '打印',
openCallback: (e) => {
this.printVisible = false
},
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
},
}
watch: {
'printVisible' (val) {
console.log(val,"val")
if (!val) {
this.getData()
}
},
}
在回调函数，关闭我们的弹框，监控弹框关闭状态，当关闭时，执行我们需要刷新操作，这样保证数据打印状态的修改。
