vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-print-nb打印el-table

使用vue-print-nb打印el-table问题总结

作者:喜陈

这篇文章主要介绍了使用vue-print-nb打印el-table问题总结,通过实例代码介绍了vue-print-nb 打印功能,本文结合实例代码讲解的非常详细,感兴趣的朋友一起看看吧

使用vue-print-nb打印el-table问题总结

css样式添加媒体查询 @media print {} 样式只有在打印的时候才会生效

1、解决单选框复选框打印时选中消失的问题

@media print {
  // 解决单选框复选框打印时选中消失的问题
  ::v-deep .el-radio__input,
  ::v-deep .el-checkbox__input {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    color-adjust: exact;
  }
}

2、解决表格打印时表格显示不全的问题

 // 解决表格打印时表格显示不全的问题
  ::v-deep table {
    table-layout: auto !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header {
    width: 99% !important;
  }
  ::v-deep .el-table__body-wrapper .el-table__body {
    width: 98% !important;
  }
  ::v-deep #print table {
    table-layout: fixed !important;
  }
  ::v-deep .el-table__fixed {
    display: none;
  }

3、解决table 序号打印错乱问题

 ::v-deep .el-table .el-table__cell.is-hidden > * {
    visibility: visible;
    font-size: 12px;
  }

4、不需要打印的内容 在标签上添加class名 noPrint 即可

  .noPrint {
    display: none;
  }
  @page {
    size: auto;
    // margin: 3mm; // 页边距
  }

其他打印样式

  // form 表单打印样式调整
  ::v-deep .el-form-item__label {
    padding: 0;
    width: 90px !important;
  }
  ::v-deep .el-form-item__content {
    margin-left: 90px !important;
  }
  ::v-deep .el-select__caret {
    opacity: 0;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
    width: 90px !important;
  }
  // 清除input边框
  ::v-deep .el-input__inner {
    max-width: 180px;
    padding: 0px;
    border: 0;
  }
  ::v-deep .el-table {
    .el-input__inner {
      display: none;
    }
  }
  // el-select 多选清除边距,icon和背景
  ::v-deep .el-input__icon {
    display: none;
  }
  ::v-deep .el-tag {
    padding: 0;
    border-width: 0;
  }
  ::v-deep .el-tag__close {
    display: none;
  }

补充:

vue-print-nb 打印功能总结

一、安装vue-print-nb

1 vue2安装 npm install vue-print-nb --save

2 vue3 安装 npm install vue3-print-nb --save

二、引入Vue项目

vue2 引入方式

// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)
// or
// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
}

vue3 引入方式

// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
// or 
// 2. 自定义指令
import print from 'vue3-print-nb'
directives: {
    print   
}

三、参数说明

四、应用

template示例

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    // 局部打印文本以及按钮
    <div id="printArea">Print Area</div>
    <button v-print="print">Print!</button>
    <ul>
      <li>
        <a
          href="https://vuejs.org" rel="external nofollow" 
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org" rel="external nofollow" 
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org" rel="external nofollow" 
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs" rel="external nofollow" 
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" 
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/" rel="external nofollow" 
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/" rel="external nofollow" 
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/" rel="external nofollow" 
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue" rel="external nofollow" 
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

script示例:

export default {
  name: 'HelloWorld',
  data () {
    let that = this
    return {
      msg: 'Welcome to Your Vue.js App',
      print: {
        id: 'printArea',
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
        preview: true, // 是否启动预览模式,默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
        zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
        previewBeforeOpenCallback () { console.log('正在加载预览窗口!'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
        previewOpenCallback () { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
        beforeOpenCallback () { console.log('开始打印之前!') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了!') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了!') },
        // url: 'http://localhost:8080/', // 打印指定的URL,确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }
}

五、注意点

Callback函数中this指向当前print object对象,that返回Vue对象;

不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择;

不设置popTitle参数页眉标题为undifined;

popTitle参数为空时,页眉标题默认为Document Title。

六、打印样式设置

/*
***设置打印内容样式,不影响页面原有样式
***以下内容为设置element table在打印时的样式,防止打印不全*/
@page {
  size: auto;
  margin: 3mm;
}
@media print {
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }
  body {
    border: solid 1px #ffffff;
    /* margin: 10mm 15mm 10mm 15mm; */
  }
  #print table {
    table-layout: auto !important;
  }
  #print .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  #print .el-table__body-wrapper .el-table__body {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }
  #print #pagetable table {
    table-layout: fixed !important;
  }
  #print .el-table__empty-block {
    width: 100% !important;
    height: auto !important;
  }
  #print .el-input-number--small{
    width: 100% !important;
  }
}

七 window.print() 浏览器打印功能

js 执行 window.print() 就会调用谷歌浏览器的打印功能。

到此这篇关于使用vue-print-nb打印el-table问题总结的文章就介绍到这了,更多相关vue-print-nb打印el-table内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文