vue-print-nb 实现页面打印(含分页打印)
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
属性 | 类型 | 默认值 | 必要 | 可选值 | 描述 |
---|---|---|---|---|---|
id | String | - | 是 | - | 范围打印 ID(如果设置url则可以不设置id) |
url | String | - | 否 | - | 打印指定的 URL。(不允许同时设置ID |
popTitle | String | - | 否 | - | 默认使用浏览器标签名,为空时为undefined |
standard | String | HTML5 | 否 | html5,loose,strict | 打印的文档类型 |
extraHead | String | - | 否 | - | 在节点中添加 DOM 节点, 并用,(Print local range only)分隔多个节点 |
extraCss | String | - | 否 | - | 新的 CSS 样式表, 并使用,(仅打印本地范围)分隔多个节点 |
openCallback | Function | - | 否 | - | 调用打印工具成功回调函数 |
closeCallback | Function | - | 否 | - | 关闭打印工具成功回调函数 |
beforeOpenCallback | Function | - | 否 | - | 调用打印工具前的回调函数 |
preview | Boolean | false | 否 | true,false | 预览工具 |
previewTitle | String | - | 否 | - | ‘打印预览’ |
previewPrintBtnLabel | String | 打印 | 否 | - | 打印按钮名称 |
previewBeforeOpenCallback | Function | - | 否 | - | 预览打开前回调函数 |
previewOpenCallback | Function | - | 否 | - | 预览打开回调函数 |
clickMounted | Function | - | 否 | - | 点击打印按钮回调函数 |
示例代码
全页面打印
<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>
vue-print-nb 实现页面打印(含分页打印)相关推荐
- Vue -print - nb 打印插件 使用详解 以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
- Vue批量生成二维码并分页打印,组件形式实现
Vue批量生成二维码并分页打印,组件形式实现 一. 最终效果 二. 实现方式 一. 最终效果 二. 实现方式 安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
- 网页打印之分页打印,去掉页码
一,打印内容分页 打印时,隐藏不需要的页面元素 测试打印时,如何模拟打印,不浪费纸张, 如果需要将一个页面向分成多页打印,就要用到CSS样式表元素page-break-after.该元素功能与Word ...
- vue 打印(分页打印)
最近项目中碰到一个需求,需要前端预览打印当前页面的内容,但是在打印的时候需要分页打印,想了很多办法,最后解决,在这做一个分享. 首先是打印,网上有很多方法,这里面我用的是一个插件 vue-print- ...
- HTML 网页打印实现分页打印功能
<html><head><title>页面打印</title><!--media=print 这个属性在打印时有效 有些不想打印出来的分页打印的都 ...
- HTML网页打印实现分页打印功能
<html><head><title>页面打印</title><!--media=print 这个属性在打印时有效 有些不想打印出来的分页打印的都 ...
- IE调用WebBrowser控件实现WEB打印、分页打印、无预览打印
WebBrowser控件 WebBrowser ActiveX 控件提供托管的包装. 托管的包装便可以在 Windows 窗体客户端应用程序中显示网页. 你可以使用WebBrowser控件重复中你的应 ...
- html表格分页打印样式,vue部分打印(多页自动分页、打印样式自定义、多页打印表格页面顶部带表头)...
写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好 一.引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量 ...
- vue 打印功能 调用原生print,带(去掉页眉页脚)分页打印
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后 在页面引入 import Print from 'vue-print-nb' </ ...
最新文章
- 算法(Algorithms)第4版 练习 1.3.11
- 如何去除table的边框_如何擦玻璃,这些擦玻璃知识很实用
- [ZJOI2012]灾难
- shell 脚本 变量 获取程序输出结果异常分析
- 哈夫曼编码译码 C语言,【求助】严蔚敏版数据结构 哈夫曼编码译码
- 项目管理的十大谈判必杀技
- laravel controller
- 计算机网络 DNS协议 FTP DHCP
- mysql----索引
- 降采样_嫦娥五号,欢迎回家!我国首次地外天体采样返回任务圆满完成
- 21 意境级讲解 共指消解的方法
- JSON转Map、List、某个对象
- P6035CDN打印机 kyocera_京瓷P7040cdn打印机驱动下载
- linux mv文件个数,关于linux:mv一个文件,其中包含Shell脚本中的空格
- ubuntu 键盘delete删除文件失效
- JS 【详解】作用域
- 备考系统集成项目管理工程师经验
- 如何计算近似纳什均衡_莫纳什大学申请条件有哪些
- Jmeter分布式压力测试全过程(阿里云ECS)
- 3个免费、无损压缩图片的工具,一键解决图片过大问题
热门文章
- 零基础能掌握seo知识吗
- 神助攻or猪队友:靠AI“僚机”脱单到底有多难?
- windows 无法更新计算机启动配置,“windows 无法更新计算机的启动配置。安装无法继续”这样解决...
- php 立方根,PHP立方根
- 大学计算机信息技术实践教程,清华大学出版社-图书详情-《大学信息技术基础实验教程(Windows7 + Office2010)》...
- SQL Server解决18456错误方案
- 如何用Visual Studio 2022 编写C语言
- [句子成分] 四、状语 定语 同位语
- Hbase、Kudu和ClickHouse横向对比
- 和ts一般怎么玩_AG首发大换血,成功复仇TS,发了工资的TS谁也打不赢?