vue 打开新窗口进行打印

 

父文件

let { href } = this.$router.resolve({
        path: ' 自己配置本地路由，不需要动态路由 ',
        query: 个人建议传一整个对象
      })

      window.open(href, 'newwindow', 'width=600, height=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no, fullscreen=yes') //独立开启

 

window.open(href) //可以新开一个窗口，但不是独立开启

 

 

子文件

 

若干需要打印的代码，支持vue 和 scss ，不需要纯 html 去拼接

data 创建对象

schoolForm :{} //个人建议最好和传的参数相同名字

crerte 获取

this.schoolForm = this.$route.query

        setTimeout(() => {
           window.print()  //延迟触发，防止因传的参数速度不够快导致拿不到数据
        }, 1000);

 

//下面这俩个方法比定时器稍微好一些，效率更快一些。 非专业测试感觉不到差距

 

可以挂在 mounted 里面，不需要定时器也能触发

mounted(){
        this.$nextTick(()=>{ // 数据源变化了就能打印
            window.print() 
        })  
    },

 

还可以挂在在 watch 里面

watch(){ //通过监听数据源是否发生变化进行打印
    this.$nextTick(()=>{
            window.print() 
        }) 
},