Vue页面实现打印功能

Lucky铂爵

已于 2022-05-18 16:56:34 修改

阅读量7.1k

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-05-18 16:27:09 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44816309/article/details/124845328

版权

本文介绍了如何在Vue.js项目中使用vue-print-nb插件实现打印功能，包括在main.js中全局注册插件，以及在组件内调用打印的方法。示例代码展示了如何设置打印区域和触发打印的按钮。同时，文章还探讨了如何通过CSS媒体查询和打印设置来控制页眉和页脚的显示，提供了显示与隐藏页眉页脚的两种方法，并展示了如何自定义页眉和页脚的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现打印功能，需要安装一个插件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:'',//头部文字 默认空
},