位置: IT常识 - 正文

vue-print-nb 实现页面打印(含分页打印)(vue print nb 教程)

编辑:rootadmin
vue-print-nb 实现页面打印(含分页打印) Web 实现页面打印安装

推荐整理分享vue-print-nb 实现页面打印(含分页打印)(vue print nb 教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实现打印功能的两种方法,vue-print-nb说明,vue-print-nb-jeecg,vue-print-nb ie,vue-easy-print,vue-print-nb遇到的坑,vue-print-nb ie,vue-print-nb说明,内容如对您有帮助,希望把文章链接给更多的朋友!

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

// 安装 打印组件npm install vue-print-nb --save引用vue-print-nb 实现页面打印(含分页打印)(vue print nb 教程)

vue2引用

import Print from 'vue-print-nb'// 全局引用Vue.use(Print);// 或者// 单组件引用import print from 'vue-print-nb'// 在自定义指令中注册directives: { print }

vue3引用

// 全局引用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属性类型默认值必要可选值描述idString-是-范围打印 ID(如果设置url则可以不设置id)urlString-否-打印指定的 URL。(不允许同时设置IDpopTitleString-否-默认使用浏览器标签名,为空时为undefinedstandardStringHTML5否html5,loose,strict打印的文档类型extraHeadString-否-在节点中添加 DOM 节点, 并用,(Print local range only)分隔多个节点extraCssString-否-新的 CSS 样式表, 并使用,(仅打印本地范围)分隔多个节点openCallbackFunction-否-调用打印工具成功回调函数closeCallbackFunction-否-关闭打印工具成功回调函数beforeOpenCallbackFunction-否-调用打印工具前的回调函数previewBooleanfalse否true,false预览工具previewTitleString-否-‘打印预览’previewPrintBtnLabelString打印否-打印按钮名称previewBeforeOpenCallbackFunction-否-预览打开前回调函数previewOpenCallbackFunction-否-预览打开回调函数clickMountedFunction-否-点击打印按钮回调函数示例代码

全页面打印

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

局部打印(Tip:被打印的区域需要被渲染出来并且不能被隐藏才可以打印)

<template><div><button v-print="printOption">NB打印</button><div id="nbprint"><table><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>手机</th><th>邮箱</th><th>地址</th><th>工龄</th><th>岗位</th><th>薪资</th></tr><tr v-for="(item, index) in list" key="index"><td>{{ index + 1}}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td>{{ item.sex }}</td><td>{{ item.phone }}</td><td>{{ item.mail }}</td><td>{{ item.address }}</td><td>{{ item.workAge }}</td><td>{{ item.jobs }}</td><td>{{ item.salary }}</td></tr></table></div></div></template><script>export default {name: "nb-print",data() {return {printOption: {id: 'nbprint', // 打印元素的id 不需要携带#号popTitle: '员工信息' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言},list: [{name: "阿哒",age: 26,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 2,jobs: "研发",salary: "1.8k"},{name: "阿荣",age: 24,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 1,jobs: "研发",salary: "1.8k"},{name: "阿豪",age: 26,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 5,jobs: "产品",salary: "1.8k"},{name: "阿晨",age: 29,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 9,jobs: "设计",salary: "1.8k"},{name: "阿震",age: 30,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 7,jobs: "销售",salary: "1.8k"},{name: "阿锋",age: 21,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 0.1,jobs: "售后",salary: "1.8k"}]}}}</script>

打印预览

<script>export default {name: "nb-print",data() {return {printOption: {id: 'nbprint', // 打印元素的id 不需要携带#号preview: true, // 开启打印预览previewTitle: '打印预览', // 打印预览标题popTitle: '员工信息', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言 // 头部文字 默认空 在节点中添加 DOM 节点, 并用,(Print local range only)分隔多个节点extraHead:'https://***/***.css, https://***/***.css', // 新的 CSS 样式表, 并使用,(仅打印本地范围)分隔多个节点extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',previewBeforeOpenCallback: () => {console.log("触发打印预览打开前回调");},previewOpenCallback: () => {console.log("触发打开打印预览回调");},beforeOpenCallback: () => {console.log("触发打印工具打开前回调");},openCallback: () => {console.log("触发打开打印工具回调");},closeCallback: () => {console.log("触发关闭打印工具回调");},clickMounted: () => {console.log("触发点击打印回调");}} }}}</script>

分页打印

<template><div><button v-print="'#nbprint'">NB打印</button><div id="nbprint"> // 方法一 // 使用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 { height: auto !important; } }</style>
本文链接地址:https://www.jiuchutong.com/zhishi/277671.html 转载请保留说明!

上一篇:windows系统进程终止方法详解(window10进程)

下一篇:苹果macOS 11 Big Sur适用哪此机型 苹果macOSBigSur升级机型汇总(苹果客服人工24小时)

  • 购物税费怎么算
  • 培训费用属于
  • 享受专项附加扣除该怎么申报
  • 合并业务的好处
  • 增值税采用零税率政策的内容
  • 专项科研经费
  • 咨询服务费记到什么科目
  • 计提的增值税比例怎么算
  • 厂房进项抵扣
  • 微税平台怎么打印发票
  • 简易计税方法使用范围
  • 公司注销需要注意的会计科目
  • 开发项目未竣工前土地使用税怎么缴纳
  • 公司参展费取得发票怎样做账?
  • 企业高管需要什么证书
  • 开办企业验资
  • 社保显示已申报,但缴不了款
  • 微信转账的手续费规则
  • 改变资金用途的说明
  • 普票被退回如何处理
  • 费用报销单正确填写格式
  • 认筹金客户经常提出哪些问题
  • 在建工程的施工方案可以外传吗
  • 应付工资薪酬期末应该为0吗
  • 收到棚户区改造资金
  • win7旗舰版叫啥
  • 股票红利税如何收
  • 波特兰在哪
  • 佛罗里达naples
  • php十进制转二进制算法
  • three.js 教程
  • 残保金漏报如何处理
  • 时间序列garch
  • css字体加粗怎么弄
  • css实现文字颜色渐变
  • vue引用类型
  • 【GitHub Copilot X】基于GPT-4的全新智能编程助手
  • showmount命令安装
  • tracet命令
  • 付了两次运费发了一个包裹
  • 记账凭证银行利息入息
  • 高速公路电子发票查询平台
  • 出纳收到现金会计分录
  • mongodb常用语句
  • python skewness
  • 银行年费什么时候取消的
  • 长期待摊费用的账务处理
  • 小规模纳税人企业所得税优惠政策最新2023
  • 太阳能发电的开发条件
  • 个人住的房子要交房产税吗
  • 固定资产多少钱算固定资产
  • 买两个能退一个吗
  • 公司收到某人打款怎么做分录
  • 先付款后开票还是先开票后付款
  • 电子发票是否使用
  • 固定资产后期可以折旧吗
  • 账务调整的原则
  • 公司向职工借钱怎么做账
  • windows8命令提示符命令大全
  • win10系统微软
  • 电脑2003系统
  • 国产系统叫啥
  • 桌面上的图标不能更改对还是错
  • mac笔记软件推荐
  • Ubuntu中Virtualbox虚拟机NAT方式无法上网解决方法
  • centos如何删除bond
  • w10qq图标不显示
  • 详解杭州亚运会会徽和口号
  • javascript definitive guide
  • python如何查询函数用法
  • 深入理解新发展理念,推进供给侧结构性改革
  • js轮播图视频教程
  • 江西省国家税务局总局官网
  • 房地产公司可以查到客户购房信息
  • 公司购买车辆是什么费用
  • 地方税务局属于地市级还是副省级
  • 美丽重生李晓晓免费阅读
  • 准予扣除是什么意思
  • 镇江市物业管理协会
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设