vue3-print-nb 实现页面打印（含分页打印）

• 前端

安装vue3-print-nb 

npm install vue3-print-nb --save

引用vue3-print-nb

全局引入

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

API

官网地址：https://github.com/Power-kxLee/vue3-print-nb

官网有详细介绍

示例代码

全页面打印

局部打印

被打印的区域需要被渲染出来，隐藏的元素不能打印

    
打印我吧

    
打印我吧

    
打印我吧


//写法一

//写法二(可以接受对象)

分页打印

    
        
        
             // 方法一
             // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
            第一页
            第二页
        
    



     // 方法二
     // 使用媒体查询 在打印时设置 body 和 html 的高度为auto
     @media print {
        @page {
          size:  auto;
        }
        body, html {   //如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加
          height: auto !important;
        }
      }

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

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

相关推荐