当前位置: 首页 > news >正文

vue使用打印组件print-js

项目场景:

由于甲方要求,项目需要打印二维码标签,故开发此功能


开发流程

  1. 安装包:npm install print-js --save
  2. print-js的使用
  3. <template><div  id="print" ref="print" ><p>打印内容<p></div>
    //打印按钮<el-button type="success" @click='doPrint'>打印</el-button></template><script>
    //打印组件
    import print  from 'print-js'
    export default {methods: {doPrint() {printJS({printable: "print",type:'html',targetStyles:['*'],style:"@page {margin:2.4cm 2cm ;resolution: 300dpi;}",onPrintDialogClose: this.erexcel=false,targetStyles: ["*"], // 使用dom的所有样式,很重要//解决字体样式失效的问题font_size: '',})},}
    }
    </script>
    

问题描述

例如:在打印过程中会出现字体样式失效的问题:

         加入这行代码即可 font_size: '',


相关文章:

vue使用打印组件print-js

项目场景&#xff1a; 由于甲方要求&#xff0c;项目需要打印二维码标签&#xff0c;故开发此功能 开发流程 安装包&#xff1a;npm install print-js --saveprint-js的使用 <template><div id"print" ref"print" ><p>打印内容<p&…...

20230830比赛总结

分数 预估分数&#xff1a; 100 100 [ 0 , 20 ] 100 [ 300 , 320 ] 100100[0,20]100[300,320] 100100[0,20]100[300,320] 实际分数&#xff1a; 100 100 10 100 310 10010010100310 10010010100310 反思 B 只是粗略观察表就急于写决策单调性优化&#xff0c;写完后…...

DNS指向别名还是IP

现在有一台服务器dbprod126&#xff0c;ip是172.22.100.4 现在有一个需求&#xff0c;需要在dns中对dbprod126建一个别名wondadb3r的记录&#xff0c;也就是ping wondadb3r的时候显示的是dbprod126的ip&#xff0c;目前有两​种方法&#xff0c;主要使用方法1指向别名&#xf…...

【考研数学】概率论与数理统计 —— 第二章 | 一维随机变量及其分布(1,基本概念与随机变量常见类型)

文章目录 引言一、一维随机变量及其分布1.1 随机变量1.2 分布函数 二、随机变量常见类型及分布2.1 离散型随机变量2.2 连续型随机变量及概率密度函数 写在最后 引言 暑假接近尾声了&#xff0c;争取赶一点概率论部分的进度。 一、一维随机变量及其分布 1.1 随机变量 设随机试…...

CSS判断手机暗黑模式

手机有个功能到了晚上会自动变成深色也就是暗黑模式.这种情况下网页会自动变颜色.如果想自由控制暗黑模式下的html样式的话,可以用如下方式: media (prefers-color-scheme: dark) {/*html, body {*//*filter: invert(1) hue-rotate(180deg);*//*}*/.maill{margin-left: 0;marg…...

【java中的Set集合】HashSet、LinkedHashSet、TreeSet(最通俗易懂版!!)

目录 一、HashSet集合 1.HashSet集合的特点 2.HashSet常用方法 二、LinkedHashSet集合 LinkedHashSet集合的特点 三、TreeSet集合 1.TreeSet集合的特点 2.TreeSet的基本使用 四、HashSet、LinkedHashSet、TreeSet的使用场景 五、list和set集合的区别 一、HashSet集合 …...

python中的文件操作

我们平常对文件的基本操作&#xff0c;大概可以分为三个步骤&#xff08;简称文件操作三步走&#xff09;&#xff1a; ① 打开文件 ② 读写文件 ③ 关闭文件 【注意事项】 注意&#xff1a;可以只打开和关闭文件&#xff0c;不进行任何读写 文件打开 open函数&#xff…...

spark支持深度学习批量推理

背景 在数据量较大的业务场景中&#xff0c;spark在数据处理、传统机器学习训练、 深度学习相关业务&#xff0c;能取得较明显的效率提升。 本篇围绕spark大数据背景下的推理&#xff0c;介绍一些优雅的使用方式。 spark适用场景 大数据量自定义方法处理、类sql处理传统机器…...

代码随想录打卡—day52—【子序列问题】— 8.31 最大子序列

共性 做完下面三题&#xff0c;发现三个的dp数组中i都是以 i 为结束的字串。 1 300. 最长递增子序列 300. 最长递增子序列 AC&#xff1a; class Solution { public:int dp[10010]; // 表示以i结束的子序列最大的长度/*if(nums[j] > nums[i])dp[j] max(dp[j],dp[i] …...

gcc4.8.5升级到gcc4.9.2

第1步&#xff1a;获取repo [rootlocalhost SPECS]# wget --no-check-certificate https://copr.fedoraproject.org/coprs/rhscl/devtoolset-3/repo/epel-6/rhscl-devtoolset-3-epel-6.repo -O /etc/yum.repos.d/devtoolset-3.repo --2021-12-07 20:53:26-- https://copr.fedo…...

Golang 中的 archive/zip 包详解(三):常用函数

Golang 中的 archive/zip 包用于处理 ZIP 格式的压缩文件&#xff0c;提供了一系列用于创建、读取和解压缩 ZIP 格式文件的函数和类型&#xff0c;使用起来非常方便&#xff0c;本文讲解下常用函数。 zip.OpenReader 定义如下&#xff1a; func OpenReader(name string) (*R…...

微服务架构七种模式

微服务架构七种模式 目录概述需求&#xff1a; 设计思路实现思路分析 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challenge Survive.…...

关于CICD流水线的前端项目运行错误,npm项目环境配置时出现报错:Not Found - GET https://registry.npm...

关于CICD流水线的前端项目运行错误&#xff0c;npm项目环境配置时出现报错&#xff1a;Not Found - GET https://registry.npm… 原因应该是某些jar包缓存中没有需要改变镜像将包拉下来 npm config set registry http://registry.npm.taobao.org npm install npm run build...

element-plus的周选择器 一周从周一开始

1、代码 1&#xff09;、template中 <el-date-picker v-model"value1" type"week" format"[Week] ww" placeholder"巡访周" change"change"value-format"YYYY-MM-DD" /> 2&#xff09;、方法中 import…...

Android 9.0 pms获取应用列表时过滤掉某些app功能实现

1.前言 在9.0的系统rom定制化开发中,对系统定制的功能也是很多的,在一次产品开发中,要求在第三方app获取应用列表的时候,需要过滤掉某些app,就是不显示在app应用列表中,这就需要在pms查询app列表时过滤掉这些app就可以了,接下来就实现这些功能 2.pms获取应用列表时过滤掉…...

HTML <thead> 标签

实例 带有 thead、tbody 以及 tfoot 元素的 HTML 表格: <table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180<…...

谷歌发布Gemini以5倍速击败GPT-4

在Covid疫情爆发之前&#xff0c;谷歌发布了MEENA模型&#xff0c;短时间内成为世界上最好的大型语言模型。谷歌发布的博客和论文非常可爱&#xff0c;因为它特别与OpenAI进行了比较。 相比于现有的最先进生成模型OpenAI GPT-2&#xff0c;MEENA的模型容量增加了1.7倍&#xf…...

力扣92. 局部反转链表

92. 反转链表 II 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&am…...

九、适配器模式

一、什么是适配器模式 适配器模式&#xff08;Adapter&#xff09;的定义如下&#xff1a;将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式&#xff08;Adapter&#xff09;包含以下主要角色&…...

使用spring自带的发布订阅来实现发布订阅

背景 公司的项目以前代码里面有存在使用spring自带发布订阅的代码&#xff0c;因此稍微学习一下如何使用&#xff0c;并了解一下这种实现方式的优缺点。 优点 实现方便&#xff0c;代码方面基本只需要定义消息体和消费者&#xff0c;适用于小型应用程序。不依赖外部中间件&a…...

余姚加工中心编程培训排行榜单

舜龙模具数控培训执行标准&#xff1a;学习进度一对一、培训一人、合格一人、成就一人&#xff1b;舜龙自有模具工厂&#xff0c;全程实战教学&#xff0c;所学贴合岗位实操&#xff0c;毕业即可对接就业。1998年-2026年&#xff0c;舜龙28年匠心传承。舜龙模具数控培训&#x…...

音乐留学路上,这些坑我替你踩过了|纯干货分享

写给正在准备或即将踏上音乐留学之路的你嘿&#xff0c;准备音乐留学的你。我知道你现在可能既兴奋又焦虑&#xff0c;手里攥着梦想&#xff0c;却不知道下一步该往哪走。别慌&#xff0c;作为过来人&#xff0c;我想跟你聊点实在的。"音乐留学不是终点&#xff0c;而是你…...

Cursor Pro完整解锁方案:一站式解决AI编程助手使用限制的终极指南

Cursor Pro完整解锁方案&#xff1a;一站式解决AI编程助手使用限制的终极指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reach…...

从零开始:Java使用通用物体识别-ResNet18镜像实现图像分类

从零开始&#xff1a;Java使用通用物体识别-ResNet18镜像实现图像分类 你是否想过&#xff0c;用Java写几行代码&#xff0c;就能让程序看懂一张图片里有什么&#xff1f;过去&#xff0c;这可能需要搭建复杂的Python环境、学习深度学习框架、处理繁琐的模型部署。但现在&…...

Zotero Connector进阶:定制知乎内容抓取与快照/正文模式切换详解

1. 为什么需要定制知乎内容抓取&#xff1f; 作为一款强大的文献管理工具&#xff0c;Zotero在学术论文管理方面表现出色&#xff0c;但在处理知乎这类内容平台时却常常力不从心。我最初使用Zotero Connector抓取知乎内容时&#xff0c;经常遇到只保存了网页快照而无法获取完整…...

translategemma-4b-it优化升级:Ollama部署后提升翻译质量的4个技巧

translategemma-4b-it优化升级&#xff1a;Ollama部署后提升翻译质量的4个技巧 你已经成功用Ollama部署了translategemma-4b-it&#xff0c;看着它把图片里的英文变成中文&#xff0c;是不是觉得挺神奇的&#xff1f;但用了几次后&#xff0c;你可能会发现一些问题&#xff1a…...

如何为Whisper ASR Webservice开发自定义引擎和插件

如何为Whisper ASR Webservice开发自定义引擎和插件 【免费下载链接】whisper-asr-webservice OpenAI Whisper ASR Webservice API 项目地址: https://gitcode.com/gh_mirrors/wh/whisper-asr-webservice Whisper ASR Webservice是一个基于OpenAI Whisper的语音识别服务…...

tomcat和国产web中间件区别和联系

国产中间件 宝蓝德 https://www.bessystem.com/product/e717be5b091e4e14a7339aa4be49ca80/info?p101东方通 https://www.tongtech.com/sy.html非国产tomcat tomcat的项目发布方式 将项目复制到tomcat/webapps中启动Tomcat服务器&#xff0c;双击 startup.bat访问项目 IDEA 中…...

决策树剪枝实战:用C++和Python分别实现,我踩过的坑你别再踩了

决策树剪枝实战&#xff1a;用C和Python分别实现&#xff0c;我踩过的坑你别再踩了 第一次在C里实现决策树剪枝时&#xff0c;内存泄漏让我调试到凌晨三点&#xff1b;而用Python重写时&#xff0c;又因为没注意NumPy的广播机制导致准确率计算全错。这篇文章记录了我从零实现两…...

终极窗口置顶指南:如何让重要窗口永远不被遮挡

终极窗口置顶指南&#xff1a;如何让重要窗口永远不被遮挡 【免费下载链接】AlwaysOnTop Make a Windows application always run on top 项目地址: https://gitcode.com/gh_mirrors/al/AlwaysOnTop AlwaysOnTop 是一个轻量级的 Windows 应用程序&#xff0c;它能够将任…...