vue项目中借助vue-print-nb插件实现打印

最新推荐文章于 2024-09-09 12:42:34 发布

cx&lavender

最新推荐文章于 2024-09-09 12:42:34 发布

阅读量474

点赞数

文章标签： vue.js npm

本文链接：https://blog.csdn.net/m0_57391092/article/details/120734393

版权

本文介绍了如何在Vue项目中利用vue-print-nb插件来实现特定内容的打印功能。通过安装插件、页面导入注册、设置打印容器及添加指令，详细阐述了实现步骤，并提供了相关代码示例和实际效果展示。

摘要由CSDN通过智能技术生成

需求：打印页面部分内容

插件原理：创建iframe，获取要打印的内容添加到iframe中，调用print()方法打印

使用：

一、安装插件

npm install vue-print-nb --save

二、页面上导入并注册

// 导入插件
import Print from "vue-print-nb";
export default {
  // 注册指令
  directives: {
    Print,
  },
}

三、提供容器并添加id

四、给按钮添加v-print指令，并在data中定义

示例代码：

<template>
  <div class="box">
    <div class="title">vue-print-nb打印插件的使用</div>
    <div class="print_box" id="printf_box">
      <div class="title_infor">基本信息</div>
      <div class="receive">
        <div class="left_receive">
          <div class="txt">收</div>
        </div>
        <div class="right_receive">
          <div class="infor">收件人࿱