vue + vue-print-nb 实现打印 以及 样式布局问题

• 前端

步骤：

1、安装插件： 

npm i vue-print-nb
npm install vue-print-nb --save

2、在 main.js 中引用

import Print from 'vue-print-nb'
Vue.use(Print); // 全局引用

3、在页面用使用

 
      
        
          打印数据 
        
       
        取 消
         
    
 

export default {
data() {
    return {
        printObj: {
           id: 'printTest', //打印的内容范围 id
           popTitle: '打印', //打印的标题
           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、样式布局不生效问题

@media print { 
  .dynysjcontent {//样式写在这里面}
}
 .title {
   word-wrap:break-word; //内容不自动换行问题
  }

5、去掉打印的页眉和页脚

@page {
    size: auto;
    margin: 0mm;
  }

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/bf8f571a79.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐