vue-print-nb的使用与常见问题
vue-print-nb的使用
vue-print-nb网址
npm安装指令:©npm i(stall) -s(ave) vue-print-nb
main.js中配置
import Print from 'vue-print-nb' Vue.use(Print);
挂载:触发元素添加v-print属性,值为id字符串v-print=”’#id名’”或对象(data return或直接写对象)
页眉和页脚
默认显示页眉页脚→上左:时间;上中:标题;下左:网址;下右:页码。
设置间距挤出去
// 打印媒体查询 @media print {@page{size: auto;margin: 3mm;} }
打印设置
打印预览→更多设置→选项由→页眉和页脚(取消勾选)代码设置
上2种方法都是不显示页脚页眉,有时要显示且修改指定内容
v-print的属性值为对象时printObj: {id: "printTest",//要打印的id名 无#号popTitle:' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言extraHead:'',//头部文字 默认空 },
插件只提供了对标题的设置属性,而其他的页眉页脚不能通过插件属性设置。插件也是创建iframe对象,调用print方法,理论上可以通过原生代码修改创建的iframe对象的属性值。
js 设置网页打印的页眉页脚和页边距原生js中window.print()
使用JS实现打印功能文章中,是创建一个iframe标签添加到body中,对其设置边距等样式,添加title标签自定义页眉标题,添加目标节点到其中。最后调用iframe节点.contentWindow.print();打印完毕后从body中删除iframe节点。最后页眉标题设置成功,其他的时间、网址、页码还在。有的说是保留上次打印设置。
window.print()打印时,如何自定义页眉/页脚、页边距文章中提供了其他的设置,一句话,我看不懂。只能简单粗暴的copy。查阅得知,只有ie浏览器才可以创建ActiveXObject对象,其他浏览器用别的对象。而ie浏览器需要对安全信息手动设置。也无法满足我使用纯代码达成目标。
综上,包括vue-print-nb插件在内,只能对title进行快捷设置,其他的要对浏览器注册表进行设置。我不会,有会纯代码实现的求告知。
空白页
有时页面看着很正常,打印预览就多了一页空白页,其原因就是边距问题,肉眼看着没内容,实际有空白间距
比如代码是这样:
<div id="printTest" style="border:1px solid black">文字<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>文字123
</div>
后面没内容,但还是多了一个空白页:
找到的最靠谱的方式
<style> @media print { /*最外层打印节点*/#printTest {display:block;height: auto;overflow: hidden;} } </style>
打印节点外边距设置为0
元素被设置了宽高100%,继承后也是100%,找到并取消100%设置,项目结构复杂不好找的话,就给打印节点设置固定高度,打印一般固定尺寸如A4纸(210mm×297mm),所以固定宽高没关系。媒体查询,仅在打印时采用样式:
// 打印媒体查询 @media print {#printTest{margin:0;height: 266.5mm;//采用默认页眉页脚时,单页内容大概长度,多页时倍数乘} }
上述方法中,如果刚好占一页,(标准盒子)再添加边框就会多一页空白,说明包括边框、内外边距、内容只要超过页面高度,就会再开一页。
如果溢出的部分(如1px边框、文字)不足以显示到下一页而仍显示在上一页;或者溢出部分(如外边距)不显示时,就会显示空白页。
官网属性
参数
解释
类型
可选值
默认值
id
范围打印 ID,必填值
String
—
—
standard
文档类型(仅打印本地范围)
String
html5/loose/strict
html5
extraHead
在节点中添加 DOM 节点, 并用,(Print local range only)分隔多个节点
String
—
—
extraCss
新的 CSS 样式表, 并使用,(仅打印本地范围)分隔多个节点
String
—
——
popTitle
String
—
——
openCallback
调用打印工具成功回调函数
Function
返回当时Vue被调用的实例
——
closeCallback
关闭打印工具成功回调函数
Function
返回当时Vue被调用的实例
——
beforeOpenCallback
调用打印工具前的回调函数
Function
返回当时Vue被调用的实例
——
url
打印指定的 URL。(不允许同时设置ID)
string
-
——
asyncUrl
通过 ‘resolve()’ 和 Vue 返回 URL
Function
-
——
preview
预览工具
Boolean
-
FALSE
previewTitle
预览工具标题
String
-
‘打印预览’
previewPrintBtnLabel
预览工具按钮的名称
String
-
‘打印’
zIndex
预览工具CSS:z-index
String,Number
-
20002
previewBeforeOpenCallback
启动预览工具前的回调函数
Function
返回当时Vue被调用的实例
——
previewOpenCallback
完全打开预览工具后的回调函数
Function
返回当时Vue被调用的实例
——
clickMounted
点击打印按钮的回调函数
Function
返回当时Vue被调用的实例
——
vue-print-nb的使用与常见问题相关推荐
- Vue -print - nb 打印插件 使用详解 以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
- vue print 解决针式打印机打印失败不清晰的问题
针式打印机只能识别一种字体和一种颜色 @media print { #printId{ font-family: Microsoft YaHei !important; color: #000 !im ...
- vue key重复_得心应用的Vue高级技巧
关注 Vue中文社区,回复"加群"加入我们一起学习,天天进步1,require.context()一个webpack的api,通过执行require.context函数获取一个特定 ...
- NB朴素贝叶斯理论推导与三种常见模型
转自:http://www.tuicool.com/articles/zEJzIbR 朴素贝叶斯(Naive Bayes)是一种简单的分类算法,它的经典应用案例为人所熟知:文本分类(如垃圾邮件过滤). ...
- vue 在线访问word,excel,pdf 文件以及打印
git 项目代码 一.pdf 1. vue-pdf 安装 npm i --save vue-pdf 语法 在组件种使用import pdf from 'vue-pdf'pdf.createLoadin ...
- VUE如何进行微信定位(使用微信JSSDK)
VUE如何进行微信定位(使用微信JSSDK) 摘要 一.使用微信JSSDK进行微信定位的开发流程 步骤一:绑定域名 步骤二:引入JS文件 步骤三:通过config接口注入权限验证配置 signatur ...
- 手把手教你在Python中实现文本分类(附代码、数据集)
作者: Shivam Bansal 翻译:申利彬 校对:丁楠雅 本文约2300字,建议阅读8分钟. 本文将详细介绍文本分类问题并用Python实现这个过程. 引言 文本分类是商业问题中常见的自然语言处 ...
- Tensorflow快餐教程(12) - 用机器写莎士比亚的戏剧
高层框架:TFLearn和Keras 上一节我们学习了Tensorflow的高层API封装,可以通过简单的几步就生成一个DNN分类器来解决MNIST手写识别问题. 尽管Tensorflow也在不断推进 ...
- 统计学习方法笔记(三)-朴素贝叶斯原理及python实现
朴素贝叶斯 条件概率 特征条件独立假设 朴素贝叶分类器 朴素贝叶斯分类算法原理 学习与分类算法 朴素贝叶斯算法原理 模型 多项式模型 高斯模型 伯努利模型 多项式模型的朴素贝叶斯分类器实现代码 高斯模 ...
- python 文本分析库_Python有趣|中文文本情感分析
前言 前文给大家说了python机器学习的路径,这光说不练假把式,这次,罗罗攀就带大家完成一个中文文本情感分析的机器学习项目,今天的流程如下: 数据情况和处理 数据情况 这里的数据为大众点评上的评论数 ...
最新文章
- spring源码之—Assert.notNull
- [asp.net] 获取网页访问来路的几种方法
- android retrofit 2.0,android – Retrofit 2.0 OnFailure – 原始响应
- 不会自动化UI测试?不会编程?没问题,会造句就行!
- java不朽神迹,不朽的神迹 Eternal Legacy HD v1.0.8
- 网页载入动画 php,网站页面加载动画代码
- android源码中的ndk,如何在不需要Android操作系统源代码的情况下在Android NDK中创建新的NativeWindow?...
- EL表达式结合页面JSTL使用 迭代显示表格
- 数组转ArrayList的正确方式
- sql语句练习50题(Mysql版)
- AndroidStudio配置一键360加固gradle脚本
- GNS3使用二:通过ASDM管理ASA防火墙
- 微软背叛wintel联盟,Intel似乎正陷入四面楚歌之中
- Roaring BitMap(高效压缩位图)
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(1)
- JAVA 下的 pgp加密解密示例
- 2022年资料员-岗位技能(资料员)操作证考试题模拟考试平台操作
- Disney Springs - 迪士尼之泉
- 全国高中数学联赛介绍
- 洛咕 P2465 [SDOI2008]山贼集团
热门文章
- 论文写作各模块大致思路 (Discussion 主要讲解)
- 中国比较出名的几个皇帝陵墓----秦皇陵
- java中润lda,新浪微博背后的那些算法
- wiiliam -学画彩虹
- ORACLE SQL Developer日期显示格式设置(DD-MM-YY)转化为YYYY-mm-DD
- 计算机打字歌,《打字机之歌》
- ruoyi是怎么点击菜单跳转页面的_电商后台设计:系统管理、菜单管理
- 错过等一年!2022年全国注册城乡规划师考试报名入口开启!
- 微信小程序:让 require支持绝对路径
- 解决IDA出现Decompilation failure: call analysis failed不可以F5的问题