前端实现打印

方法一:借助插件 vue-print-nb

npm i vue-print-nb
import Print from 'vue-print-nb'

Vue.use(Print)

安装之后在main.js文件中引入

打印哪个哪里就给哪个加上id标识

前端实现打印_第1张图片

使用v-print即可完成绑定

打印

方法二:借助window.print()

1.先获取页面的内容

2.获取要打印区域的内容

this.reload用于局部刷新,需要APP.vue中定义并inject注入进来

也可以使用location.relaod()进行刷新

// 打印table表格
        let  bdhtml=document.body.innerHTML
        let jubudata=document.getElementById('querytable').innerHTML
        document.body.innerHTML=jubudata
        document.getElementsByTagName('body')[0].style.zoom=0.92;
        window.print()
        this.reload()
        document.body.innerHTML=bdhtml
        return false

你可能感兴趣的:(vue,前端)