步骤：
1、安装插件：
npm i vue-print-nbnpm install vue-print-nb --save
2、在 main.js 中引用
import Print from 'vue-print-nb'Vue.use(Print); // 全局引用
3、在页面用使用
<el-dialog custom-class="printClass" :visible.sync="dialogVisible" :before-close="handleClose"><div id="printTest"><div class="dynysjcontent" ref="printContent"><span class="title">打印数据</span> </div></div> <el-button @click="dialogVisible = false">取 消</el-button><v-button text="打印" v-print="printObj" @click="print" style="margin-left:15px;"></v-button> </el-dialog>export default {data() {return {printObj: {id: 'printTest', //打印的内容范围 idpopTitle: '打印', //打印的标题extraCss: "", // 打印可引入外部的一个 css 文件extraHead: "", // 打印头部文字previewTitle: '', // 打印预览的标题（开启预览模式后出现）previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面） previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）beforeOpenCallback() {}, // 开启打印前的回调事件openCallback() {}, // 调用打印之后的回调事件closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）}};}},methods: {print () { //调用接口事件this.$axios({method: 'GET',url: addPrintURL,params: {orderId: 1,orderType: ''},})},}
4、样式布局不生效问题
<style lang="scss">@media print { .dynysjcontent {//样式写在这里面}}.title {word-wrap:break-word; //内容不自动换行问题}</style>
5、去掉打印的页眉和页脚
<style lang="scss">@page {size: auto;margin: 0mm;}</style>
