Vue3使用vue-print-nb插件打印功能

已于 2023-11-09 16:47:26 修改
阅读量4.8k 收藏 10
点赞数
文章标签： vue.js 前端 javascript
于 2023-11-09 16:43:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PaceMak1r777/article/details/134314318
版权

 插件官网地址https://www.npmjs.com/package/vue-print-nb

 效果展示:

打印效果

  1.  根据不同的Vue版本安装插件

    //Vue2.0版本安装方法
npm install vue-print-nb --save
pnpm install vue-print-nb --save
yarn add vue-print-nb


//Vue3.0版本安装方法：
npm install vue3-print-nb --save
pnpm install vue3-print-nb --save
yarn add vue3-print-nb

  2. 全局挂载

    //在mian.ts文件中加入
import Print from 'vue-print-nb'
Vue.use(Print)

  3. 打印页面的样式

            <!--        打印的内容-->
        <div id="printTest">
          <div class="box_printTest">
            <el-row>
              <el-col :span="13"
                ><div class="grid-content ep-bg-purple"
              /></el-col>
              <el-col
                :span="11"
                style="
                  font-size: 25px;
                  color: rgb(51, 51, 153);
                  font-weight: 600;
                "
                >COMMERCIAL INVOICE
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :span="24"
                style="font-size: 15px; color: #000000; font-weight: bold"
                >XIAMEN VIGORTEAM TRADING CO.,LTD</el-col
              >
            </el-row>

            <el-row>
              <el-col :span="14" style="font-size: 13px; color: #303133"
                >1501-1502 GOLDEN COAST PLAZA,NO.99 LUJIANG
                ROAD,XIAMEN,CHINA</el-col
              >
              <el-col :span="5">
                <el-row>Date:</el-row>
                <el-row>Invoice #:</el-row>
                <el-row>Purchase Order #</el-row>
                <el-row>L/C #</el-row>
              </el-col>
              <el-col :span="5">
                <el-row class="demo">July 24,2023</el-row>
                <el-row class="demo">WBG-123456</el-row>
                <el-row class="demo">JDG-123456</el-row>
                <el-row class="demo">BLG-123456</el-row>
              </el-col>
            </el-row>
            <br />

            <el-row>
              <el-col :span="10">
                <div style="background-color: rgb(51, 51, 153)">
                  <span style="color: white; font-weight: bold">Bill To:</span>
                </div>
              </el-col>
              <el-col :span="4" />
              <el-col :span="10"
                ><div style="background-color: rgb(51, 51, 153)">
                  <span style="color: white; font-weight: bold">Ship To:</span>
                </div></el-col
              >
            </el-row>

            <el-row>
              <el-col
                :span="10"
                style="font-size: 15px; color: #000000; font-weight: bold"
                >MR PRICE HOME ,A DIVISION OF MR PRICE GROUP LIM</el-col
              >
              <el-col :span="4" />
              <el-col
                :span="10"
                style="font-size: 15px; color: #000000; font-weight: bold"
                >MR PRICE HOME ,A DIVISION OF MR PRICE GROUP Wen</el-col
              >
            </el-row>
            <div style="height: 10px" />

            <el-row>
              <el-col :span="10" style="font-size: 13px; color: #303133"
                >HEAD OFFICE,UPPER LEVEL NORTH CONCOURSE DURBAN STATION ，65
                MASABALALA YENGWA AVENUE DURBAN,SOUTH AFRICA</el-col
              >
              <el-col :span="4" />
              <el-col :span="10" style="font-size: 13px; color: #303133"
                >HEAD OFFICE,UPPER LEVEL NORTH CONCOURSE，DURBAN STATION ，65
                MASABALALA YENGWA AVENUE DURBAN SOUTH AFRICA</el-col
              >
            </el-row>
            <br />
            <br />

            <el-row>
              <el-col :span="24">
                <div style="background-color: rgb(51, 51, 153)">
                  <span style="color: white; font-weight: bold"
                    >Shipment Information</span
                  >
                </div>
              </el-col>
            </el-row>
            <div style="height: 10px" />

            <el-row>
              <el-col :span="6" style="font-size: 13px; color: #303133"
                >Country of Origin</el-col
              >
              <el-col
                :span="18"
                style="font-size: 13px; color: #303133; border: 1px solid #333"
                >China</el-col
              >
            </el-row>
            <div style="height: 10px" />

            <el-row>
              <el-col :span="6" style="font-size: 13px; color: #303133"
                >Port of Loading</el-col
              >
              <el-col
                :span="5"
                style="font-size: 13px; color: #303133; border: 1px solid #333"
                >TIANJIN,CHINA</el-col
              >
              <el-col :span="1" />
              <el-col :span="6" style="font-size: 13px; color: #303133"
                >Port of Destination</el-col
              >
              <el-col
                :span="6"
                style="font-size: 13px; color: #303133; border: 1px solid #333"
                >DURBAN,SOUTH,AFRICA</el-col
              >
            </el-row>
            <div style="height: 10px" />

            <el-row>
              <el-col :span="6" style="font-size: 13px; color: #303133"
                >Shiping Method</el-col
              >
              <el-col
                :span="5"
                style="font-size: 13px; color: #303133; border: 1px solid #333"
                >FOB</el-col
              >
            </el-row>
            <!--            打印的表格-->
            <div>
              <el-table
                :data="baseProperty.tableData"
                :span-method="arraySpanMethod"
                border
                :header-cell-style="{
                  background: '#333399',
                  color: '#ffffff'
                }"
                :cell-style="{ color: '#000000' }"
                style="width: 100%; margin-top: 20px"
              >
                <el-table-column
                  prop="id"
                  align="center"
                  style="color: black"
                  label="SHIPPING MARKS"
                  width="150"
                />
                <el-table-column
                  prop="name"
                  align="center"
                  label="DESCRIPTION OF GOODS"
                  width="210"
                />
                <el-table-column
                  prop="amount1"
                  align="center"
                  label="QTY"
                  width="120"
                />
                <el-table-column
                  align="center"
                  prop="amount2"
                  label="UNIT PRICE"
                  width="120"
                />
                <el-table-column
                  prop="amount3"
                  align="center"
                  label="AMOUNT"
                  width="120"
                />
              </el-table>
            </div>

            <el-row>
              <el-col :span="5" />
              <el-col :span="11" style="font-size: 13px; color: #303133"
                >产地: 廊坊</el-col
              >
              <el-col
                :span="5"
                style="
                  font-size: 13px;
                  color: white;
                  background-color: #003366;
                  font-weight: bold;
                "
                >Total</el-col
              >
              <el-col
                :span="3"
                style="
                  font-size: 13px;
                  color: white;
                  background-color: #003366;
                  font-weight: bold;
                "
                >USD 10920.00</el-col
              >
            </el-row>
            <br />
            <el-row>
              <el-col :span="24">
                <div style="background-color: rgb(51, 51, 153)">
                  <span style="color: white; font-weight: bold"
                    >Summary Information</span
                  >
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="16"
                style="
                  font-size: 13px;
                  color: #303133;
                  border-bottom: 1px solid #333;
                  border-right: 1px solid #333;
                  border-left: 1px solid #333;
                "
              >
                <div
                  style="height: 100%; text-align: center; line-height: 100px"
                >
                  TOTAL: U.SDOLLARS TEN THOUSAND NINE HUNDRED AND TWENTY ONLY
                </div>
              </el-col>
              <el-col
                :span="8"
                style="
                  font-size: 13px;
                  color: #303133;
                  border-bottom: 1px solid #333;
                  border-right: 1px solid #333;
                "
              >
                <el-row style="border-bottom: 1px solid #333">
                  <el-col :span="12"
                    ><span style="font-weight: bold"> Total QTY </span></el-col
                  >
                  <el-col :span="12">
                    <div style="text-align: center">1680PCS</div>
                  </el-col>
                </el-row>
                <el-row style="border-bottom: 1px solid #333">
                  <el-col :span="12"
                    ><span style="font-weight: bold"> Total CBM </span></el-col
                  >
                  <el-col
                    :span="12"
                    style="background-color: rgb(192, 192, 192)"
                  >
                    <div style="text-align: center">60.06CBM</div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12"
                    ><span style="font-weight: bold"> Container </span></el-col
                  >
                  <el-col :span="12">
                    <div style="text-align: right">*20°FCL</div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12" />
                  <el-col
                    :span="12"
                    style="background-color: rgb(192, 192, 192)"
                  >
                    <div style="text-align: right">*40°FCL</div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12" />
                  <el-col :span="12">
                    <div style="text-align: right">*40°HQ&nbsp;</div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12" />
                  <el-col
                    :span="12"
                    style="background-color: rgb(192, 192, 192)"
                  >
                    <div style="text-align: right">*45°HQ&nbsp;</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </div>




//表格数据
const baseProperty = reactive({
  userCode: "",
  dragBtnBC1: "#e5e4e9",
  dragBtnBC2: "#e5e4e9",
  searchTab: "Regular Data",
  openSearch: false,
  topDivShow: true,
  buttonTab: "Split Shipping Plan",
  topDivShowFull: false,
  loading: false,
  subSkuList: [],
  warehouseList: [],
  overseasWarehouseList: [],
  shippingPlanMethodList: [],
  fobPortList: [],
  leftStyle: "width: 73%-10px",
  rightStyle: "width: 27%; height: 100%",
  rightShow: false,
  show: false,
  searchForm: {
    shippingPlanOrder: "",
    status: "",
    page: 1,
    limit: 10
  },
  tableData: [
    {
      id: "12987122",
      name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
      amount1: "682PCS",
      amount2: "USD 6.50",
      amount3: "USD 4420.00"
    },
    {
      id: "12987123",
      name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
      amount1: "700PCS",
      amount2: "USD 6.50",
      amount3: "USD 4550.00"
    },
    {
      id: "12987124",
      name: "A03-01-PP001\n" + "H.S.CODE:9401690090\n" + "产品尺寸:53*53*51",
      amount1: "300PCS",
      amount2: "USD 6.50",
      amount3: "USD 1950.00"
    },
  ]
});

  4. 打印按钮

    // printTest是需要打印内容的div的id ，并在前面加上#                     
<el-button
@click="toPrint(row)"
v-print="'#printTest'"
size="default"   
link
type="primary"
>COMMERCIAL INVOICE
</el-button>

  5. 关于颜色存在偏差的问题

    @media print {
  // 强制打印背景(这样才能打印出背景颜色)    Kris_wen
  * {
    -webkit-print-color-adjust: exact !important;
  }
}

  6. 去掉页眉页脚

    /* 去掉页眉页脚 */
@page {
  size: auto;
  margin: 0mm;
}

  7. 表格最好使用原生的HTML原生的表格，使用element-table会出现分页割断的问题。

  8. 有些数据是要先通过ajax从后端取出，在调用打印方法的。

PaceMak1r777
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-print-nb实现打印功能
若如流水 淡淡流过
02-22 867
需求目的：实现对table表格 form表单的 信息之类的打印，后台管理用的多。2.main.ts 全局注册。
超好用的Vue打印插件，可支持分页
01-20
Vue打印插件
vue插件——vue-print-nb 实现打印功能
yehaocheng520的博客
02-26 5199
vue插件——vue-print-nb 实现打印功能
非常 nb 的 Vue 组件 (含Vue3版本)（打印）
最新发布
qq_66953312的博客
07-25 1512
关于 vue-print-nb 组件的详细介绍！
Vue3+vue3-print-nb 实现分页打印功能
Z1014h的博客
01-08 3266
注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。只需要给不自动换行的标签加上。3. 样式布局不生效问题。
vue3-print-nb打印功能实现
小废物
02-03 1545
在 vue3 项目中实现打印。
vue3使用vue3-print-nb打印；vue3直接触发打印窗口
i_am_a_div的博客
05-30 2888
vue3-print-nb 打印页面；vue页直接打印；vue直接触发打印；vue直接唤起打印弹窗
Vue3使用vue-print-nb插件调起打印功能
可可的博客
08-15 5299
添加打印位置，绑定id。
vue3 vue3-print-nb 实现打印功能
weixin_43512977的博客
12-26 1895
vue3 vue3-print-nb 实现打印功能
如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印
技小白的博客
06-14 3359
在前端开发中，经常需要打印页面的特定部分，比如客户列表或商品详情页。要快速实现这些功能，可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理，轻松实现页面内容的打印功能。
vue3 页面打印 vue3-print-nb
不使疯
09-11 1840
vue3 页面打印 vue3-print-nb
vue页面打印插件，页面打印
08-05
vue,页面打印插件
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令...npm install vue3-print-nb --save // Global instruction import { createApp } from 'vue' import App from './App.vue' import print from 'vue3-p
vue3使用print-template生成pdfDemo
08-18
在这个"vue3使用print-template生成pdfDemo"项目中，开发者利用Vue3的特性构建了一个示例，展示了如何将网页内容转化为PDF文档。这个过程通常涉及到前端渲染和第三方库的使用。 首先，我们看到`index.html`是项目的...
在vue中使用的打印插件
11-16
在Vue中，常用的打印插件有`vue-print-nb`、`vue-print-page`等。这些插件简化了在Vue应用中添加打印功能的过程。以`vue-print-nb`为例，它支持批量打印和分页，非常适合我们的需求。 2. **安装插件** 首先，我们...
2024年前端最全vue3实现区域打印功能(vue3-print-nb)，在线前端开发培训
2401_84123113的博客
05-06 1234
我就是被打印的内容在#printBox 容器里的内容都会被打印噢
使用 Vue 3 和 vue-print-nb 插件实现复杂申请表的打印
tigerhhzz的博客
05-31 766
要使用 Vue 3 和 vue-print-nb 插件实现复杂申请表的打印功能，以下是详细的步骤。这里展示一个基本的应用例子，涵盖了 Vue 3 的安装、vue-print-nb 插件的配置和一个简单的表单打印功能。在开发管理系统或申请表打印功能时，打印功能是一个很常见的需求。打开浏览器访问 http://localhost:8080，您应该会看到一个复杂的申请表，并且可以通过点击“打印申请表”按钮来打印该表单。这样，就使用 Vue 3 和 vue-print-nb 插件实现了复杂申请表的打印功能。
vue3如何使用vue-print-nb打印
05-28
要使用vue-print-nb插件进行打印，你需要按照以下步骤进行操作： 1.首先，你需要使用npm或yarn安装vue-print-nb插件。可以在终端中运行以下命令进行安装： npm install vue-print-nb 2.安装完成后，在你的Vue组件中引入vue-print-nb插件： import Print from 'vue-print-nb'; 3.在组件中使用打印功能，可以在组件的methods中添加一个名为print的方法，在该方法中调用Print组件的print方法： methods: { print() { this.$print({ printContainer: '.print' //你需要打印的区域的class名称 }) } } 4.在组件模板中添加一个打印按钮，并将其绑定到print方法： <button @click="print">打印</button> 这样就可以使用vue-print-nb插件进行打印了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值