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的属性值为对象时
插件只提供了对标题的设置属性,而其他的页眉页脚不能通过插件属性设置。插件也是创建iframe对象,调用print方法,理论上可以通过原生代码修改创建的iframe对象的属性值。printObj: { id: "printTest",//要打印的id名 无#号 popTitle:' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言 extraHead:'',//头部文字 默认空 },
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 { displa