[vue3-print-nb]vue3中实现打印功能

vue3 安装

npm install vue3-print-nb --save

项目中引入

// 全局引用
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 
}

HTML:

 <button v-print="printObj">Print local range</button><div id="loading" v-show="printLoading"></div>
 
  <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>

JavaScript:

export default {
    data() {
        return {
           printLoading: true,
            printObj: {
              id: "printMe",  // 还可以采用url，如 url: 'http://localhost:8080/'
              preview: true, // 打印预览
              previewTitle: 'Test Title', // The title of the preview window. The default is 打印预览

              popTitle: 'good print',
              extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
              previewBeforeOpenCallback () {
                console.log('正在加载预览窗口')
              },
              previewOpenCallback () {
                console.log('已经加载完预览窗口')
              },

              beforeOpenCallback (vue) {
                vue.printLoading = true
                console.log('打开之前')
              },
              openCallback (vue) {
                vue.printLoading = false
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

原文参考： https://gitcode.net/mirrors/Power-kxLee/vue3-print-nb?utm_source=csdn_github_accelerator

vue3-print-nb插件的一些优化

去掉页眉页脚

<style>
@page {
    size: auto;
    margin: 0mm;
  }
</style>

打印內容不自动换行问题

<style>
  .procedure{
      word-wrap:break-word;
   }
</style>

参考链接：https://blog.csdn.net/weixin_53791978/article/details/128063915