vue2踩坑之项目:生成二维码使用vue-print-nb打印二维码

1.

vue2安装 npm install vue-print-nb --save

vue3安装 npm install vue3-print-nb --save

 2.

//vue2 引入方式 全局 main.js

import Print from 'vue-print-nb'

Vue.use(Print)

------------------------------------------------------------------------------------

//vue2 引入方式 按需

import print from 'vue-print-nb'

directives: { print} //自定义指令中注册

------------------------------------------------------------------------------------

//vue3 引入方式 全局 main.js

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')

------------------------------------------------------------------------------------

//vue3 引入方式 按需

import print from 'vue3-print-nb'

directives: { print } //自定义指令中注册 

//html<el-button @click="clickPrint(form)">打印</el-button><el-drawer title="图片打印" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="80%"><div style="position: absolute;right: 110px;top: 15px;padding-left: 30px;"><!-- <el-button @click="drawer = false">取消</el-button> --><el-button type="primary" v-print="print">打印</el-button></div><div id="printView"><div class="img-content-first" :class=" index >= 5?'img-content':'img-content-first'" v-for="(item,index) in erwmList" :key="index"><img :src=item.imgBase class="img" /><div class="text">{{ item.connectorCode }}</div></div></div></el-drawer>//script
// 单组件引用打印插件
import print from 'vue-print-nb'
import {getxxxx} from "../../api/xxxx/xxxx.js" // 二维码接口//data
// 抽屉 批量打印
data() {return {//表单筛选条件form:{status:'',name:'',//....},drawer: false,direction: 'rtl',erwmList:[], //二维码列表erweimaImg: '',// 打印插件print: {id: "printView", //打印的区域的id名popTitle: "管理平台", // 打印配置页上方标题extraHead: "", //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔extraCss: "",},}
}//js// 批量打印 点击事件 clickPrint (item) {// console.log(item,'ss');if ((item.status=== "" || null || undefined) &&(item.name === ""||null||undefined)) {this.drawer = falsethis.$alert('', '请选择筛选条件!', {confirmButtonText: '确定',});} else {getxxxx(item).then(res => {//console.log(res);this.erwmList= resif (res) {this.drawer = true}})}},// 批量打印 抽屉关闭事件handleClose (done) {this.drawer = false// this.$confirm('确认关闭?')//   .then(_ => {//     done();//   })//   .catch(_ => {});},//css
<style scoped lang="less">
.......img-content-first{display: inline-block;border: 2px solid #000;margin: 0 0 0 30px;.text{margin: 0 auto;text-align: center;color: #000;font-size: 18px;margin-top: -24px;}}.img-content{display: inline-block;border: 2px solid #000;margin: 50px 0 0 30px;.text{margin: 0 auto;text-align: center;color: #000;font-size: 18px;margin-top: -24px;}}// @media print {//   #print .img-content {//     width: 150px;//     height: 150px;// }// }
</style><!-- 添加独立style标签 -->
<style media="print" lang="less">@page {size: auto;}@media print {// html {//   zoom: 70%; //设置打印页面的缩放,大小//    margin: 0 auto;// }#printView .img-content-first{border: 2px solid #000;// width: 190px;height: 185px;margin: 10px 0 0 15px;}#printView .img-content{border: 2px solid #000;// width: 190px;height: 185px;margin: 30px 0 0 15px;}#printView .img{// width: 190px;height: 180px;}#printView .text{margin: 0 auto;text-align: center;color: #000;font-size: 18px;margin-top: -24px;}
}

上一篇文章,

vue2踩坑之项目:yarn无法加载文件 C:UsersAdministratorAppDataRoaming pmyarn.ps1,因为在此系统上禁止运行脚本_意初的博客-CSDN博客yarn:无法加载文件 C:UsersAdministratorAppDataRoaming pmyarn.ps1,因为在此系统上禁止运行脚本。2.执行:set-ExecutionPolicy RemoteSigned 选择Y后进行回车。3.查看执行策略:get-ExecutionPolicy 查看是否为RemoteSigned。1.开始菜单中搜索PowerShell以管理员身份打开。4.关闭窗口报错解决。https://blog.csdn.net/weixin_43928112/article/details/132488190?spm=1001.2014.3001.5502

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

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

相关文章

WEBGL(4):动态绘制点并根据详细自定义颜色

1 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …

前端面试中Vue的有经典面试题三

11. 网页从输入网址到渲染完成经历了哪些过程&#xff1f; 大致可以分为如下7步&#xff1a; 输入网址&#xff1b; 发送到DNS服务器&#xff0c;并获取域名对应的web服务器对应的ip地址&#xff1b; 与web服务器建立TCP连接&#xff1b; 浏览器向web服务器发送http请求&a…

windows 不能ping通虚拟机问题

先查看windows网卡 查看虚拟机种 对应VMnet8种的 nat &#xff08;我用的是这种连接方式&#xff09;设置 问题是不在同一个网段&#xff0c;修改windows VMnet8网卡的配置 保证网关、网段是一样的 现在ping问题解决&#xff0c;也能windows远程连接虚拟机

Bridge Champ举办人机对战赛:NFT游戏与传统竞技共生发展编织新格局

概要 现在,NFT与体育竞技正日益紧密地联系在一起。一些体育项目开始推出与赛事或球队相关的NFT,同时也有部分NFT游戏开始举办电子竞技赛事。这种共生发展正在改变体育竞技的生态。 笔者采访了桥牌冠军项目相关负责人,探讨NFT游戏与传统体育竞技的融合潜力。桥牌冠军近期成功举…

(二十一)大数据实战——Flume数据采集之复制和多路复用案例实战

前言 本节内容我们完成Flume数据采集的一个多路复用案例&#xff0c;使用三台服务器&#xff0c;一台服务器负责采集本地日志数据&#xff0c;通过使用Replicating ChannelSelector选择器&#xff0c;将采集到的数据分发到另外俩台服务器&#xff0c;一台服务器将数据存储到hd…

pytorch-神经网络-手写数字分类任务

Mnist分类任务&#xff1a; 网络基本构建与训练方法&#xff0c;常用函数解析 torch.nn.functional模块 nn.Module模块 读取Mnist数据集 会自动进行下载 %matplotlib inlinefrom pathlib import Path import requestsDATA_PATH Path("data") PATH DATA_PATH / &…

使用 Nacos 在 Spring Boot 项目中实现服务注册与配置管理

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

每日刷题(回溯法经典问题之子集)

食用指南&#xff1a;本文为作者刷题中认为有必要记录的题目 前置知识&#xff1a;回溯法经典问题之组合 ♈️今日夜电波&#xff1a;想着你—郭顶 1:09 ━━━━━━️&#x1f49f;──────── 4:15 …

jmeter setUp Thread Group

SetUp Thread Group 是一种特殊类型的线程组&#xff0c;它用于在主测试计划执行之前执行一些初始化任务。 SetUp Thread Group 通常用于以下几种情况&#xff1a; 用户登录&#xff1a;在模拟用户执行实际测试之前&#xff0c;模拟用户登录到系统以获取访问权限。 创建会话&a…

freertos之资源管理

中断屏蔽 屏蔽中断函数 在任务中使用 taskENTER_CRITICA()/taskEXIT_CRITICAL() 在中断中使用 taskENTER_CRITICAL_FROM_ISR()/taskEXIT_CRITICAL_FROM_ISR() 功能介绍 使用上述函数&#xff0c;进入临界中断&#xff0c;任务不会切换&#xff0c;且中断优先级处于con…

Ubuntu入门04——目录与文件

目录 1.显示当前工作目录 2.更改目录 3.创建工作目录 4.删除工作目录 5.移动文件或者文件夹 6.文件夹and文件查看命令 7. 回到根目录&#xff0c;回到上一级 8.删除工作目录 9.查看目录和文件 10.以树状图列出目录内容 11.文件查找 12.在数据库中查找文件或目录 1…

【大数据】Apache Iceberg 概述和源代码的构建

Apache Iceberg 概述和源代码的构建 1.数据湖的解决方案 - Iceberg1.1 Iceberg 是什么1.2 Iceberg 的 Table Format 介绍1.3 Iceberg 的核心思想1.4 Iceberg 的元数据管理1.5 Iceberg 的重要特性1.5.1 丰富的计算引擎1.5.2 灵活的文件组织形式1.5.3 优化数据入湖流程1.5.4 增量…

[移动通讯]【Carrier Aggregation-3】【5G】

前言&#xff1a; 参考&#xff1a; 5G Mobile Communications&#xff1a;《Carrier Aggregation in 5G》 目录&#xff1a; 1&#xff1a; carrier Allocation Schemes 2&#xff1a; 网络结构 3&#xff1a; LTE CA 4: 5G CA 一 Carrier Allocation Schemes CA 主要作用…

数学建模--非整数规划求解的Python实现

目录 1.算法流程简介 2.算法核心代码 3.算法效果展示 1.算法流程简介 #非线性规划模型求解: #我们采用通用的minimize函数来求解 #minimize(f,x,method,bounds,contrains) #f是待求函数 #x是代求的自变量 #method是求解方法 #bounds是取值范围边界 #contrains是约束条件 &q…

Java HashMap

简介 HashMap 是一个散列表&#xff0c;它存储的内容是键值对(key-value)映射。 HashMap 实现了 Map 接口&#xff0c;根据键的 HashCode 值存储数据&#xff0c;具有很快的访问速度&#xff0c;最多允许一条记录的键为 null&#xff0c;不支持线程同步。 HashMap 是无序的&…

新材料行业CRM客户管理系统的选择

新材料行业虽属小众细分市场&#xff0c;但其应用极广。更广阔的市场也意味着更激烈的竞争。新材料行业巨头林立&#xff0c;企业如何能脱颖而出&#xff1f;这里有一个适合新材料行业CRM系统推荐—Zoho CRM&#xff0c;帮助新材料企业推动业务高效运转的新模式。 数字化是企业…

Python爬虫乱码问题之encoding和apparent_encoding的区别

encoding是从http中的header中的charset字段中提取的编码方式&#xff0c;若header中没有charset字段则默认为ISO-8859-1编码模式&#xff0c;则无法解析中文&#xff0c;这是乱码的原因 apparent_encoding会从网页的内容中分析网页编码的方式&#xff0c;所以apparent_encodi…

Ubuntu之apt-get系列--apt-get安装软件的方法/教程

原文网址&#xff1a;Ubuntu之apt-get系列--apt-get安装软件的方法/教程_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Ubuntu使用apt-get安装软件的方法。 安装软件 先更新列表 sudo apt-get update 安装软件 sudo apt-get install <package name>[<version>]…

windows查看端口占用,通过端口找进程号(查找进程号),通过进程号定位应用名(查找应用)(netstat、tasklist)

文章目录 通过端口号查看进程号netstat通过进程号定位应用程序tasklist 通过端口号查看进程号netstat 在Windows系统中&#xff0c;可以使用 netstat 命令来查看端口的占用情况。以下是具体的步骤&#xff1a; 打开命令提示符&#xff08;CMD&#xff09;&#xff1a;按WinR组…

绘制钻头芯厚变化图

import numpy as np import matplotlib.pyplot as plt posnp.array([0.05,0.5,0.97,3]) data_m1np.array([0.088,0.093,0.098,0.116]) data_m2data_m1-0.01 data_m3data_m1-0.02 fig plt.figure(figsize(5, 4)) plt.rcParams[xtick.direction] in # 将x周的刻度线方向设置向…