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: '',


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

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

相关文章

计算机毕设 大数据商城人流数据分析与可视化 - python 大数据分析

文章目录 0 前言课题背景分析方法与过程初步分析&#xff1a;总体流程&#xff1a;1.数据探索分析2.数据预处理3.构建模型 总结 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到…

STM32 RTC实验

RTC时钟简介 STM32F103的实时时钟&#xff08;RTC&#xff09;是一个独立的定时器。 STM32的RTC模块拥有一组连续计数的计数器&#xff0c;在相对应的软件配置下&#xff0c;可提供时钟日历的功能。 修改计数器的值可以重新设置系统的当前时间和日期。 RTC模块和时钟配置系统…

【python爬虫】12.建立你的爬虫大军

文章目录 前言协程是什么多协程的用法gevent库queue模块 拓展复习复习 前言 照旧来回顾上一关的知识点&#xff01;上一关我们学习如何将爬虫的结果发送邮件&#xff0c;和定时执行爬虫。 关于邮件&#xff0c;它是这样一种流程&#xff1a; 我们要用到的模块是smtplib和emai…

【前端demo】动态赋值CSS

文章目录 效果过程html实现oninput与onchange事件统一配置CSS 代码HTMLCSSJS 其他demo 效果 动态显示CSS样式&#xff0c;由:root统一配置。 效果预览&#xff1a;https://codepen.io/karshey/pen/BavLrwy 参考&#xff1a; Dynamic CSS Variables(codepen.io) 漫谈document…

附录2-将三国演义按章节存储为不同的txt(bs4)

地址 《三国演义》全集在线阅读_史书典籍_诗词名句网 目录 1 项目分析 2 代码 1 项目分析 我们可以在首页中找到所有的章节 每一个章节是一个a标签&#xff0c;a标签连接到该章节的内容 但这个网站他有bug&#xff0c;章节都是乱套的&#xff0c;我们无视这种错误&#…

Go map转json

在Go中如何返回前端 字段名称/数量都不确定的json数据&#xff1f; 之前用Go写web服务&#xff0c;返回给前端的json格式的接口&#xff0c;有哪些要返回的字段都是明确的。都是预先定义一个结构体&#xff0c;json.Marshal一下即可~ 但当有的场景&#xff0c;要返回哪些字段不…

vue antv X6流程图

第一 下载2.0插件 第二 引入代码 <!-- --> <template><div id"container" style"min-width: 400px; min-height: 600px"></div> </template><script > //这里可以导入其他文件&#xff08;比如&#xff1a;组件&am…

喜报 | 再度中标南网项目!AR 开启电力远程运维新智慧

近日&#xff0c;中国南方电网官网发布《2023年南方电网数字平台科技 (广东)有限公司物资品控远程协助软件采购项目中标公告》&#xff0c;ALVA Systems 凭借 ALVA Rainbow 创新应用竞得此标。 随着相关技术的逐步成熟&#xff0c;基础问题远程化解决已经在工业领域广泛应用。 …

地理测绘基础知识(5) 照射计算下篇

在上一篇中&#xff0c;我们解决了照射计算的基本模型关系&#xff0c;并能够根据手电的位置指向&#xff0c;在地表求取光斑。但是&#xff0c;前文使用的是设置探针求取场强的点求取&#xff0c;对于绘制地表的等值线包络图、求取地表包线的具体解析情况&#xff0c;就不够用…

Elasticsearch,Logstash和Kibana安装部署(ELK Stack)

前言 当今数字化时代&#xff0c;信息的快速增长使得各类组织和企业面临着海量数据的处理和分析挑战。在这样的背景下&#xff0c;ELK Stack&#xff08;Elasticsearch、Logstash 和 Kibana&#xff09;作为一套强大的开源工具组合&#xff0c;成为了解决数据管理、搜索和可视…

石油化工智慧安监方案:TSINGSEE青犀视频AI智能识别安全生产风险预警平台建设

一、行业背景 石油化工生产存储企业属于高温、高压、易燃、易爆、有毒的危险行业&#xff0c;其生产装置大型化、密集化、生产工艺复杂、生产过程紧密耦合。随着互联网技术的发展&#xff0c;运用先进的AI、物联网、大数据、云计算等技术手段不断提高石油化工行业的安全监管水…

mysql 的增删改查以及模糊查询、字符集语句的使用

一、mysql启动与登陆(windows下的mysql操作) 1.启动mysql服务 net start mysql81 2.登陆mysql mysql -uroot -p 3.查看所有数据库 show databases; 二、模糊查询&#xff08;like&#xff09; 1. _代表查询单个 2.%代表查询多个 3.查找所有含有schema的数据库&#xff1b;…