垃圾站 生活小记 Vue页面如何实现打印功能

Vue页面如何实现打印功能

有个项目,之前因为着急上线,有限功能没有实现,现在需要给项目增加一个打印功能,费话不多说,这里需要安装一个插件vue-print-nb,使用方法如下:

1)安装全局的插件

npm install vue-print-nb -S

2)在main.js中注册

import Print from 'vue-print-nb'

Vue.use(Print)

3)在页面中使用

<template>
<div>
<!-- 要打印的区域 -->
<div id="printMe">
<p>今天的天气真好啊</p>
<el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
<el-form-item label="姓名:">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="describle">
<el-input
:disabled="detail"
type="textarea"
:rows="4"
:maxlength="2000"
placeholder=""
v-model="form.describle">
</el-input>
</el-form-item>
</el-form>
</div>
<!-- 打印的按钮,显示打印预览 -->
<el-button v-print="'#printMe'">打印</el-button>
</div>
</template>

<script>

export default {
data() {
return {
form:{}
}
},
}
</script>

<style scoped>

</style>

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

在这里插入图片描述

1.设置间距挤出去

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

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

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

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

上一篇
下一篇

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

返回顶部