vue-print-nb 基本使用

大大源码 • • 其他

Vue2版本：

import Print from 'vue-print-nb'
Vue.use(Print);

// 指令
import print from 'vue-print-nb'

directives: {
    print   
}

ve3版本：

npm install vue3-print-nb --save
// Global instruction 
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')

//或者指令
import print from 'vue3-print-nb'

directives: {
    print   
}

    data() {
      return {
        printObj: {
          id: "nbprint", // 这里是要打印元素的ID
          popTitle: '', // 打印标题
          preview: false, // 开启打印预览
          targetStyles: ['*'], // 解决打印效果没有样式问题
        }
      };
    },

 注意事项：

my-table-view  打印的元素标签，书写样式的时候不要有父元素包含，

设置边框以及字体颜色最好设置为纯黑（#000）避免字体出现问题

去除页脚页眉

// 去除打印的页眉页脚
<style media="print">
  @page {
    size: auto;
    margin: 5mm;
  }

  /*分页打印 */
  body,
  html {
    height: auto !important;
  }
  /*设置字体和颜色避免出现字体中空问题 */
  #nbprint {
    font-family: Microsoft YaHei !important;
    color: #000 !important;
  }
</style>
版权声明：本文为qq_35086913原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>