当前位置:首页 » 《随便一记》 » 正文

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

2 人参与  2023年05月03日 10:49  分类 : 《随便一记》  评论

点击全文阅读


Web 实现页面打印

安装

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

// 安装 打印组件npm install vue-print-nb --save

引用

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。(不允许同时设置ID
popTitleString--默认使用浏览器标签名,为空时为undefined
standardStringHTML5html5,loose,strict打印的文档类型
extraHeadString--在节点中添加 DOM 节点, 并用,(Print local range only)分隔多个节点
extraCssString--新的 CSS 样式表, 并使用,(仅打印本地范围)分隔多个节点
openCallbackFunction--调用打印工具成功回调函数
closeCallbackFunction--关闭打印工具成功回调函数
beforeOpenCallbackFunction--调用打印工具前的回调函数
previewBooleanfalsetrue,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>

点击全文阅读


本文链接:http://zhangshiyu.com/post/60373.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1