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

 插件官网地址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 LUJIANGROAD,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 ,65MASABALALA 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 ,65MASABALALA 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-columnprop="id"align="center"style="color: black"label="SHIPPING MARKS"width="150"/><el-table-columnprop="name"align="center"label="DESCRIPTION OF GOODS"width="210"/><el-table-columnprop="amount1"align="center"label="QTY"width="120"/><el-table-columnalign="center"prop="amount2"label="UNIT PRICE"width="120"/><el-table-columnprop="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;"><divstyle="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从后端取出,在调用打印方法的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/138691.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3+vite搭建后台项目-2项目 src 别名的配置

src 别名的配置 在开发项目的时候文件与文件关系可能很复杂&#xff0c;因此我们需要给src文件夹配置一个别名 1.找到// vite.config.ts 文件 mport {defineConfig} from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({plugins…

Redis配置文件

Redis可以在没有配置文件的情况下使用内置的默认配置启动&#xff0c;但是这种设置仅推荐用于测试和开发。 配置Redis的正确方法是提供一个Redis配置文件&#xff0c;通常称为 redis.conf 。 通过命令行传递参数启动 你也可以直接使用命令行传递Redis配置参数。这对于测试非…

低代码平台,业务开发的“银弹”

目录 一、为什么需要低代码平台 二、低代码平台的搭建能力 三、低代码其他能力 四、写在最后 随着互联网和信息技术的快速发展&#xff0c;各行各业都在积极拥抱数字化转型。在这个过程中&#xff0c;软件开发成为企业实现数字化转型的关键环节。然而&#xff0c;传统的软件开发…

C语言 每日一题 PTA 11.8 day14

1.矩阵A乘以B 给定两个矩阵A和B&#xff0c;要求你计算它们的乘积矩阵AB。需要注意的是&#xff0c;只有规模匹配的矩阵才可以相乘。 即若A有Ra​行、Ca列&#xff0c;B有Rb行、Cb列&#xff0c;则只有Ca与Rb​相等时&#xff0c;两个矩阵才能相乘。 输入格式&#xff1a; 输入…

【Java】IntelliJ IDEA使用JDBC连接MySQL数据库并写入数据

目录 0 准备工作1 创建Java项目2 添加JDBC 驱动程序3 创建数据库连接配置文件4 创建一个 Java 类来连接和操作数据库5 运行应用程序 在 IntelliJ IDEA 中连接 MySQL 数据库并将数据存储在数据表中&#xff0c;使用 Java 和 JDBC&#xff08;Java Database Connectivity&#xf…

Python 中 Selenium 的屏幕截图

文章目录 使用 save_screenshot() 函数在 Python 中使用 selenium 捕获屏幕截图使用 get_screenshot_as_file() 函数在 Python 中使用 selenium 捕获屏幕截图使用 Screenshot-Selenium 包在 Python 中使用 selenium 捕获屏幕截图总结我们可以使用 Selenium 在自动化 Web 浏览器…

Android拖放startDragAndDrop拖拽Glide加载堆叠圆角图,Kotlin(5)

Android拖放startDragAndDrop拖拽Glide加载堆叠圆角图&#xff0c;Kotlin&#xff08;5&#xff09; import android.content.ClipData import android.graphics.Canvas import android.graphics.Point import android.os.Bundle import android.util.Log import android.view.…

Echarts柱状体实现滚动条动态滚动

当我们柱状图中X轴数据太多的时候&#xff0c;会自动把柱形的宽度挤的很细&#xff0c;带来的交互非常不好&#xff0c;因此就有一个属性来解决&#xff1a;dataZoom 第一种简易的版本&#xff0c;横向滚动。 dataZoom: {show: true, // 为true 滚动条出现realtime: true, // 实…

含免费次数的API接口资源分享

全国招投标查询&#xff1a;查询招标保标信息&#xff0c;涵盖招标信息查询、中标信息查询、VIP项目、拟在建项目、业主委托项目、PPP项目、项目来源、历史招标库、政府采集信息、招标定制、订阅推送、订阅导出、数据下载等数十个招投标领域。AI绘画-Mid Journey&#xff1a;使…

hdlbits系列verilog解答(反转向量位序)-40

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 给定一个 100 位输入向量 [99:0],反转其位顺序。 Module Declaration module top_module( input [99:0] in, output [99:0] out ); 二、verilog源码 module top_module( input [99:0] in,output [99:0

Leetcode 299. Bulls and Cows

Problem You are playing the Bulls and Cows game with your friend. You write down a secret number and ask your friend to guess what the number is. When your friend makes a guess, you provide a hint with the following info: The number of “bulls”, which …

RabbitMQ集群配置以及负载均衡配置

RabbitMQ集群配置以及负载均衡配置 环境配置集群配置安装rabbitmq启动rabbitmq开启远程登录添加用户并且授权用户添加数据存放目录和日志存放目录查看端口拷⻉erlang.cookie将mq-2、mq-3作为内存节点加⼊mq-1节点集群中查看集群状态添加一个新的队列 RabbitMq负载均衡配置-HAPr…

【ChatGLM2-6B】小白入门及Docker下部署

【ChatGLM2-6B】小白入门及Docker下部署 一、简介1、ChatGLM2是什么2、组成部分3、相关地址 二、基于Docker安装部署1、前提2、CentOS7安装NVIDIA显卡驱动1&#xff09;查看服务器版本及显卡信息2&#xff09;相关依赖安装3&#xff09;显卡驱动安装 2、 CentOS7安装NVIDIA-Doc…

常用SQL——IF介绍

在SQL中&#xff0c;IF语句用于根据条件执行不同的操作。下面是一个简单的教程&#xff0c;介绍如何在不同的数据库中使用IF语句。 1. MySQL中的IF语句&#xff1a; sql IF(condition, true_value, false_value) 在MySQL中&#xff0c;IF函数接受一个条件表达式&#xff0c…

自主开发刷题应用网站H5源码(无需后端无需数据库)

该应用使用JSON作为题库的存储方式&#xff0c;层次清晰、结构简单易懂。 配套的word模板和模板到JSON转换工具可供使用&#xff0c;方便将题库从word格式转换为JSON格式。 四种刷题模式包括顺序刷题、乱序刷题、错题模式和背题模式&#xff0c;可以根据自己的需求选择适合的模…

计网----累积应答,TCP的流量控制--滑动窗口,粘包问题,心跳机制,Nagle算法,拥塞控制,TCP协议总结,UDP和TCP对比,中介者模式

计网----累积应答&#xff0c;TCP的流量控制–滑动窗口&#xff0c;粘包问题&#xff0c;心跳机制&#xff0c;Nagle算法&#xff0c;拥塞控制&#xff0c;TCP协议总结&#xff0c;UDP和TCP对比&#xff0c;中介者模式 一.累积应答 1.什么是累计应答 每次发一些包&#xff0…

Leetcode刷题详解—— 组合总和

1. 题目链接&#xff1a;39. 组合总和 2. 题目描述&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些…

Pytorch实战教程(十一)-卷积神经网络

0. 前言 卷积神经网络 (Convolutional Neural Network, CNN) 是一种非常强大的深度学习模型,广泛应用于图像分析、目标检测、图像生成等任务中。CNN 的核心思想是卷积操作和参数共享,卷积操作通过滑动滤波器(也称为卷积核)在输入数据上进行元素级的乘积和求和运算,从而提取…

uniapp蓝牙搜索设备并列表展示

1.需求&#xff1a;3.0的桩可以值扫码通过蓝牙名字直接绑定&#xff0c;2.0的桩二维码无蓝牙名称则需通过蓝牙列表来绑定 2.碰到问题 1.0 蓝牙列表需要去重&#xff08;蓝牙列表通过deviceId去重再放进展示列表&#xff09; 2.0页面会卡顿&#xff08;调用my.stopBluetoothDevi…

docker部署mongodb

1&#xff1a;拉去momgodb镜像 2&#xff1a;拉去成功后&#xff0c;通过docker-compose.yml配置文件启动mongodb&#xff0c;docker-compose.yml配置如下 version: 3.8 services:mongodb-1:container_name: mongodbimage: mongo ports:- "27017:27017"volumes:- G:…