vue-print-nb的使用

1. vue-print-nb网址

2. npm安装指令：©npm i(stall) -s(ave) vue-print-nb

3. main.js中配置

   import Print from 'vue-print-nb'
   Vue.use(Print);
   

4. 挂载：触发元素添加v-print属性，值为id字符串v-print=”’#id名’”或对象（data return或直接写对象）

页眉和页脚

默认显示页眉页脚→上左：时间；上中：标题；下左：网址；下右：页码。

1. 设置间距挤出去

   // 打印媒体查询
   @media print {
     @page{
         size:  auto;
         margin: 3mm;
     } 
   }
   

2. 打印设置
   打印预览→更多设置→选项由→页眉和页脚（取消勾选）

3. 代码设置
   上2种方法都是不显示页脚页眉，有时要显示且修改指定内容
   v-print的属性值为对象时

   printObj: {
     id: "printTest",//要打印的id名 无#号
     popTitle:' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
     extraHead:'',//头部文字 默认空
   },
   

   插件只提供了对标题的设置属性，而其他的页眉页脚不能通过插件属性设置。插件也是创建iframe对象，调用print方法，理论上可以通过原生代码修改创建的iframe对象的属性值。
   js 设置网页打印的页眉页脚和页边距

4. 原生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>

后面没内容，但还是多了一个空白页：

1. 找到的最靠谱的方式

   <style>
   @media print {
   /*最外层打印节点*/
     #printTest {
       display:block;
       height: auto;
       overflow: hidden;
     }
   }
   </style>
   

2. 打印节点外边距设置为0

3. 元素被设置了宽高100%，继承后也是100%，找到并取消100%设置，项目结构复杂不好找的话，就给打印节点设置固定高度，打印一般固定尺寸如A4纸（210mm×297mm），所以固定宽高没关系。媒体查询，仅在打印时采用样式：

   // 打印媒体查询
   @media print {
     #printTest{
       margin：0;
       height: 266.5mm;//采用默认页眉页脚时，单页内容大概长度，多页时倍数乘
     }
   }
   

4. 上述方法中，如果刚好占一页，（标准盒子）再添加边框就会多一页空白，说明包括边框、内外边距、内容只要超过页面高度，就会再开一页。
   如果溢出的部分（如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被调用的实例

——