vue打印使用插件：vue-print-nb

先创建一个vue项目，管理员打开cmd，输入命令：vue create project1。创建完成后用IDEA打开项目。

一、安装

管理员打开cmd，进入项目内，输入如下命令

vue2.x

npm install vue-print-nb –save

vue3.x

npm install vue3-print-nb --save

二、在main.js文件中注册

vue2.x

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

vue3.x

import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

三、使用

修改About.vue文件如下：

页面中使用,给需要打印的容器加一个id,打印按钮传入这个id

<template>
  <div class="about">
    <div id="printMe" style="background:red;">
      <p>葫芦娃，葫芦娃</p>
      <p>一根藤上七朵花 </p>
      <p>小小树藤是我家 啦啦啦啦 </p>
      <p>叮当当咚咚当当　浇不大</p>
      <p> 叮当当咚咚当当 是我家</p>
      <p> 啦啦啦啦</p>
      <p>...</p>
      <div class="describle">
        <el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
          <el-form-item label="姓名:" prop="name">
            <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>
    </div>

    <button v-print="'#printMe'">Print local range</button>
  </div>
</template>
<script>

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

四、运行项目

访问：http://localhost:8080/，页面如下所示：

点击print local range按钮，如下所示：

点击打印，保存pdf，打开pdf，如下所示：

 

六、html中打印使用步骤

标签

<input type="button" value="打印" onclick="printpage()" class="print-button"/>
<!--startprint-->
<div id="section-to-print">
    ......
</div>
<!--endprint-->

样式

.print-button {
            /* 基础样式 */
            background: linear-gradient(to bottom, #4a8cff, #2a6dda); /* 蓝色渐变 */
            color: white;
            border: none;
            border-radius: 6px; /* 圆角 */
            padding: 12px 28px; /* 舒适的填充 */
            font-size: 16px;
            font-weight: 600; /* 加粗字体 */
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(42, 109, 218, 0.3); /* 匹配背景色的阴影 */
            transition: all 0.3s ease; /* 平滑过渡效果 */

            /* 文字样式 */
            letter-spacing: 0.5px;
            text-transform: uppercase; /* 大写字母 */
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 现代字体 */
        }
        .print-button:hover {
            background: linear-gradient(to bottom, #3a7cff, #1a5dc9); /* 悬停时变深 */
            transform: translateY(-2px); /* 轻微上浮 */
            box-shadow: 0 6px 8px rgba(42, 109, 218, 0.4); /* 加大阴影 */
        }

        .print-button:active {
            transform: translateY(1px); /* 点击下沉效果 */
            box-shadow: 0 2px 4px rgba(42, 109, 218, 0.3); /* 减少阴影 */
        }

        .print-button:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 140, 255, 0.5); /* 聚焦光环效果 */
        }

方法：

function printpage() {
        let oldStr = window.document.body.innerHTML; // 获取body的内容
        let start = "<!--startprint-->"; // 开始打印标识, 17个字符
        let end = "<!--endprint-->"; // 结束打印标识
        let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
        newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
        window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
        window.print(); // 调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML = oldStr; // body替换为原来的内容
    }