vue3-print-nb 实现页面打印(含分页打印)

这篇具有很好参考价值的文章主要介绍了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

官网有详细介绍

示例代码

全页面打印

<button v-print>打印整个页面</button>

局部打印

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

<div id="a">
    <p>打印我吧</p>
    <p>打印我吧</p>
    <p>打印我吧</p>
</div>
//写法一
<button v-print="#a">局部打印</button>
//写法二(可以接受对象)
<button v-print="{id:a}">局部打印</button>

分页打印文章来源地址https://www.toymoban.com/news/detail-698777.html

<template>
    <div>
        <button v-print="'#a'">打印</button>
        <div id="a">
             // 方法一
             // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
            <div style="page-break-after:always">第一页</div>
            <div style="page-break-after:always">第二页</div>
        </div>
    </div>
</template>

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

到了这里,关于vue3-print-nb 实现页面打印(含分页打印)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Vue @media print在JavaScript中插入不同尺寸的打印页面,可自定义尺寸大小和打印机配置

    本文介绍了如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面,并提供了代码编写、使用教程、注意事项和避坑点,最后进行了总结。 在开发Web应用程序时,经常需要提供打印功能。Vue框架提供了@media print媒体查询,可以根据打印需求自定义打印页面的样式

    2024年02月05日
    浏览(106)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(下)

    在进入文章的正文之前,我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日,转眼间也快写博客两年时间,去年很遗憾没有去到深圳(疫情原因)线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(49)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)

    今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的使用,以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(44)
  • vue-print 实现打印功能

    一、安装 1. Vue2 2. Vue3 二、基本使用 1. 直接打印页面HTML 1)方法 ① 给要打印的部分设置一个 id ② 在打印按钮中添加 v-print=\\\"\\\'#id名\\\'\\\" 2)代码(以表格为例) 2. 个性化设置 1)方法 打印按钮的 v-print 绑定一个对象 2)代码 3)效果展示 ① 预览工具 3. 打印URL 1)方法 ① 给 打印

    2024年02月02日
    浏览(40)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • 【Vue】Vue 使用 Print.js 打印选中区域的html,用到的是Element ui table表格,解决页面样式不出现或者table表格样式错乱问题!!!

    需求 : 打击打印按钮,文字内容以及表格中的内容 解决方案 加上这句就好了!完美! 一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 2.1 原因: table-layout: fixed导致的,

    2024年02月09日
    浏览(67)
  • vue使用打印组件print-js

    由于甲方要求,项目需要打印二维码标签,故开发此功能 安装包:npm install print-js --save print-js的使用 例如:在打印过程中会出现字体样式失效的问题:          加入这行代码即可 font_size: \\\'\\\',

    2024年02月10日
    浏览(63)
  • 前端使用print.js实现打印

    项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。 如果需要用到前端生成二维码可以看我的这篇文章: 在vue项目中使用qrcodesjs2生成二维码 注:以下都是基于edge浏览器进行的,另外身边

    2023年04月09日
    浏览(41)
  • window.print() 前端实现网页打印详解

    目录 前言  一、print()方法  二、打印样式 2.1使用打印样式表 2.2使用媒介查询 2.3内联样式使用media属性 2.4在css中使用@import引入打印样式表 三、打印指定区域部分内容 3.1方法一 3.2方法二 3.3方法三 四、强制插入分页 4.1page-break-before(指定元素前添加分页符) 4.2page-break-afte

    2024年02月02日
    浏览(35)
  • vue3问题:如何实现打印功能?

      编辑排版  | 宋大狮 平台运营  | 小唐狮 ONE 问题描述 2023年4月22号记,久违了大家。 今天要和大家分享的是关于如何实现表单、表格等自定义内容的打印功能。 最近在后台项目中,有遇到打印详情页的需求,因为开发中此功能用的次数不多,所以放在此处仅做一下记录

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包