vue-print-nb的使用

vue-print-nb网址
npm安装指令：(c)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:'&nbsp;',//页眉标题 默认浏览器标题 空字符串时显示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
后面没内容，但还是多了一个空白页： 
 找到的最靠谱的方式 <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 <head></head>在节点中添加 DOM 节点，
 并用,(Print local range only)分隔多个节点 String — —
extraCss <link>新的 CSS 样式表，
 并使用,（仅打印本地范围）分隔多个节点 String — ——
popTitle <title></title> 标签内容（仅打印本地范围） 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被调用的实例 —— 
npm install vue-print-nb --save
 import Print from 'vue-print-nb'
// Global instruction 
Vue . use ( Print ) ;
// Local instruction
import print from 'vue-print-nb'
directives: {
    print   
Vue3版本：
npm install vue3-print-nb --save
 // Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-p
                                    Word中有一个很麻烦，但我们又不得不掌握的功能——页眉。公司做的宣传册，在页眉加个Logo，增加点公司形象，却不知道从何下手。添加页眉，但是页眉总是有条讨厌的横线，怎么删都删不掉，等等等等……如果你受上述任何一个问题困扰，那就证明你没有掌握页眉的正确设置方法。所以今天小编给大家学习汇总了几个页眉设置最常见的技巧，希望对你有帮助。1、清除页眉中的横线在Word中，双击页眉处即可进入页眉页脚模式。这...
                                    1、每页添加一个文档双击页眉处，进入相应的编辑状态，将鼠标移到页脚处，点击设计——页眉和页脚——页码，插入合适的样式即可。PS：页码插入的方式还可以通过插入——页眉和页脚——页码方式来实现。2、第几页共几页如何将文档设置成第几页共几页的格式？点击插入——页码——选择第几页共几页的页码格式(即X/Y格式)，之后选中页码按Shift+F9切换域代码，输入内容【第{PAGE}页/共{NUMPAGES}页...
                                    vue-print-nb这个打印功能不能实现分页,然后我百度了好久发现用print.js可以搞定分页,随带还可以转pdf
https://github.com/denghao123/Print.js
在main.js中引入Print.js和comm.css
然后在print.js中加入此行代码
str += "<style>html,body,div{height: auto!imp...
                                    一、这次使用的是vue-print-nb插件完成打印的功能。
借鉴链接：https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html
文档：https://www.npmjs.com/package/vue-print-nb#usage-method
使用方式
安装 npm install vue-print-nb --save
在main.js文件中注册
import Print from 'vue-print-nb'
Vue.us
vue自带插件可以实现打印功能，这就需要我们本地安装这个插件。
1、安装  npm install vue-print-nb --save
判断如何安装成功：package.json文件搜索print查看是否有，其实所有判断插件是否安     装成功都可以这样。
2，引入  安装好以后在main.js文件中引入
import Print from ‘vue-print-nb’
　　Vue.use(Print);  //注册
3、如何使用
打印按钮上加上自定义指令v-print，这个是v

参数	解释	类型	可选值	默认值
id	范围打印 ID，必填值	String	—	—
standard	文档类型（仅打印本地范围）	String	html5/loose/strict	html5
extraHead	<head></head>在节点中添加 DOM 节点，并用,(Print local range only)分隔多个节点	String	—	—
extraCss	<link>新的 CSS 样式表，并使用,（仅打印本地范围）分隔多个节点	String	—	——
popTitle	<title></title> 标签内容（仅打印本地范围）	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被调用的实例	——