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.rhkb.cn/news/187538.html

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

相关文章

ArcGIS进阶:水源涵养功能分级评价操作

首先抛出水源涵养重要性评价的公式&#xff1a;水源涵养量降雨量-蒸散发量-地表径流量&#xff0c;其中地表径流量降雨量*平均地表径流系数 声明&#xff1a;以下数据来源于来自于牛强老师书籍&#xff08;城乡规划GIS技术&#xff09;。 以下给出重要性评价阈值表&#xff1…

linuxC语言缓冲区及小程序的实现

文章目录 1.文件缓冲区1.1介绍1.2缓冲文件系统1.3冲刷函数fflush1.4认识linux下的缓冲区 2.linux小程序的实现2.1 回车\r和换行\n2.2倒计时程序2.3进度条小程序sleep/usleep代码运行结果 1.文件缓冲区 1.1介绍 为缓和 CPU 与 I/O 设备之间速度不匹配&#xff0c;文件缓冲区用以…

玄子Share-HTML5知识手册

玄子Share-HTML5知识手册 前言&#xff1a; 这一版 HTML 笔记&#xff0c;算是我写的第四版了&#xff0c;第三版对照课本编写&#xff0c;第四版则是对照 MDN 官方文档编写&#xff0c;不论是术语亦或专业性&#xff0c;都更上一层 文章依托 MDN 文档&#xff0c;拓展了大量课…

基于SSM的汽车在线租赁管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

skynet学习笔记02— skynet介绍、skynet基础API与环境变量

01、Skynet与Actor模型 在系统Skynet之前&#xff0c;先了解一下Skynet与Actor模型&#xff0c;下列是风云大佬的介绍以及一个大佬的博客 https://github.com/cloudwu/skynet/wiki/GettingStartedhttps://blog.csdn.net/qq769651718/article/details/79432793 02、Skynet基础…

11.7加减计数器,可置位~,数字钟分秒,串转并,串累加转并,24位串并128,流水乘法器,一些乘法器

信号发生器 方波&#xff0c;就是一段时间内都输出相同的信号 锯齿波就是递增 三角波就是先增后减 加减计数器 当mode为1则加&#xff0c;Mode为0则减&#xff1b;只要为0就输出zero 这样会出问题&#xff0c;因为要求是十进制&#xff0c;但是这里并没有考虑到9之后怎么办&a…

Python编程——模块、包和__init__.py

1. 模块 Python中的一个文件即为一个模块(Module)&#xff0c;一个模块引用另外一个模块的变量、函数或类时&#xff0c;使用import来导入。模块名即文件名。 如fibo.py 文件下有如下代码&#xff1a; def fib(n): # write Fibonacci series up to na, b 0, 1while a <…

18 Linux 阻塞和非阻塞 IO

一、阻塞和非阻塞 IO 1. 阻塞和非阻塞简介 这里的 IO 指 Input/Output&#xff08;输入/输出&#xff09;&#xff0c;是应用程序对驱动设备的输入/输出操作。当应用程序对设备驱动进行操作的时候&#xff0c;如果不能获取到设备资源&#xff0c;那么阻塞式 IO 就会将对应应用…

作业提交产品的爽点、痛点和痒点分析以及开源软件介绍

目录 1 爽点1.1 什么是爽点1.2 如何构成爽点1.3 案例 2 痛点2.1 什么是痛点2.2 如何构成痛点2.3 案例分析 3 痒点3.1 什么是痒点3.2 如何构成痒点3.3 案例分析 4 开源软件Canvas LMS4.1 链接地址4.2 简介4.3 特点和功能4.4 功能展示图片 1 爽点 1.1 什么是爽点 即时满足&#…

基于SSM的网络音乐系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

将 ONLYOFFICE 文档编辑器与 С# 群件平台集成

在本文中&#xff0c;我们会向您展示 ONLYOFFICE 文档编辑器与其自有的协作平台集成。 ONLYOFFICE 是一款开源办公套件&#xff0c;包括文本文档、电子表格和演示文稿编辑器。这款套件支持用户通过文档编辑组件扩展第三方 web 应用的功能&#xff0c;可直接在应用的界面中使用。…

深度学习(生成式模型)——Classifier Guidance Diffusion

文章目录 前言问题建模条件扩散模型的前向过程条件扩散模型的反向过程条件扩散模型的训练目标 前言 几乎所有的生成式模型&#xff0c;发展到后期都需要引入"控制"的概念&#xff0c;可控制的生成式模型才能更好应用于实际场景。本文将总结《Diffusion Models Beat …

TortoiseSVN 状态图标不显示的两种解决办法

文章目录 TortoiseSVN 方式解决注册表方式解决 TortoiseSVN 方式解决 在桌面或者资源管理器中鼠标右键打开 TortoiseSVN 设置选择 Icon Overlays (图标覆盖)Status cache&#xff08;状态缓存&#xff09; 选择 ‘Shell’ 选择 Icon Overlays&#xff08;图标覆盖&#xff09;…

uniapp和vue3+ts开发小程序,使用vscode提示声明变量冲突解决办法

在uniapp中&#xff0c;我们可能经常会遇到需要在不用的环境中使用不同变量的场景&#xff0c;例如在VUE3中的小程序环境使用下面的方式导入echarts&#xff1a; const echarts require(../../static/echarts.min); 如果不是小程序环境则使用下面的方式导入echarts&#xff…

MobaXterm 安装+使用

目录 1 下载安装 1.1 官网下载(速度慢) 1.2 WebRA下载(不是最新版) 2 常用功能 2.1 基础设置 2.2 常用功能 1 下载安装 1.1 官网下载(速度慢) 点击MobaXterm官网,按下图↓↓步骤下载 1.2 WebRA下载(不是最新版) 点击WebRA网址,按下图↓↓步骤下载 2 常用功能 2.1 基础设…

科普测量开关电源输出波形的三种方法及电源波形自动化测试步骤

开关电源波形测试就是对开关电源的输出波形进行检测和分析&#xff0c;观察开关电源参数变化&#xff0c;以此来判断开关电源的性能是否符合要求。好的开关电源对于设备以及整个电路的正常运行是非常重要的&#xff0c;因此开关电源输出波形测试是开关电源测试的重要环节&#…

python调用chrome实现网页自动操作

一. 内容简介 python调用chrome实现网页自动操作。 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3代码 链接&#xff1a; 三.主要流程 3.1 下载驱动和插件 调用谷歌浏览器&#xff0c;需要下载浏览器驱动&#xff08;https://registry.npmmirror.co…

conda修改虚拟环境名称

conda 修改虚拟环境名称 conda 不能直接更改名称&#xff0c;但是可以通过克隆环境解决 新建环境&#xff08;克隆旧环境&#xff09; conda create --name 新环境名 --clone 旧环境名 删除原环境 conda remove --name 旧环境名 --all 查看现有环境 conda env list conda i…

PMCW体制雷达系列文章(1) – PMCW体制雷达综述

说明 相位调制连续波(Phase-modulated continuous wave, PMCW)雷达&#xff0c;或又被称为数字雷达&#xff0c;近年来开始被应用于汽车雷达领域。而且因其特有的一些优势(精度高、抗干扰能力强等)被认为是车载毫米波雷达的发展趋势之一(从目前占主导的调频连续波(Frequency-mo…

矩阵的除法

B/A 如果矩阵A可逆&#xff0c;那么 证明&#xff1a; A/AB 如果矩阵A和B都可逆&#xff0c;那么 证明&#xff1a;