Vue 传参打开新页面，并打印部分内容

一、需求

输入单号，点击“打印”按钮 ---> 弹出新页面，打印单号信息

图一

图二

二、代码实现

1. 传参到新页面

<el-form-item label="单号" prop="noticeNumber">
	<el-input v-model="searchForm.noticeNumber"></el-input>
</el-form-item>
<el-button @click="deliveryPrint(searchForm.noticeNumber)" style="width: auto;">
    打印单号对应的出库领用单
</el-button>

//打印出库单
deliveryPrint(noticeNumber){
    if(noticeNumber) {
        let routeData = this.$router.resolve({
            path: "/components/deliveryPrint", //路由path
            query: {
                noticeNumber: noticeNumber
            }
        });
        window.open(routeData.href, '_blank');
    }else {
        this.$message.error("当前单号为空！");
    }
}

2. 新页面 deliveryPrint.vue 接收参数

<template>
    <div id="printArea">
         {{this.$route.query.noticeNumber}}
     </div>
</template>

3. 新页面弹出打印弹框

4. 取消弹框自动关闭该页面

data() {
    return {
        noticeNumber: "",
    };
},
methods: {
	pagePrint(){
	    var print = document.getElementById("printArea"); //这一句
	    document.body.innerHTML = print.innerHTML;        //和这一句 
	    //上面两句是因为使用了element-ui的布局和标签页，打开新页面时仍然会携带顶部栏和侧边栏，
	    //这两句可以将body设置为本vue页面，将外部边框隐藏掉
	    window.print(); //弹出打印框
	    window.close(); //取消则关闭当前页面
    }
},
watch: {
	noticeNumber: function() { //监听赋值，在数据加载完毕后执行
        this.$nextTick(function(){
            this.pagePrint();
        });
    }
}