vue二维码生成插件qrcodejs2-fix、html生成图片插件html2canvas、自定义打印内容插件print-js的使用及问题总结

本文主要是介绍vue二维码生成插件qrcodejs2-fix、html生成图片插件html2canvas、自定义打印内容插件print-js的使用及问题总结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、二维码生成插件qrcodejs2-fix

1.安装命令

npm i qrcodejs2-fix --save

2.页面使用

import { nextTick } from 'vue';
import QRCode from 'qrcodejs2-fix';
nextTick(() => {let codeView = document.querySelector("#codeView");codeView.innerHTML = "";new QRCode(codeView, {text: '测试内容', // 二维码内容width: 220, // 二维码图片宽度height: 220, // 二维码图片高度})
})

注意:若未生成二维码,可能是因为标签还未加载完,需要时可使用nextTick。

二、html生成图片插件html2canvas

1.安装命令

npm i html2canvas --save

2.页面使用

html2canvas(document.querySelector('#codeViewBox'), {useCORS: true, // 是否尝试使用CORS从服务器加载图像timeout: 1000,scale: 1.3, // 用于渲染的比例,默认为浏览器设备像素比率。allowTaint: true, // 是否允许跨源图像污染画布width: 450, // 画布的宽度height: 800 // 画布的高度
}).then(canvas => {let imgData = canvas.toDataURL('image/jpg');console.log(imgData);// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB...
})

可能会遇到的问题:
1.若二维码插件和生成图片插件一起使用,生成图片时只有二维码没有其他内容,是因为二维码插件生成时会创建canvas标签,html生成图片时也会创建canvas标签,插件获取标签的时候可能会混淆,可以在html2canvas()方法使用前加上下面两句代码(二维码插件会生成一个canvas标签和一个img标签,移除二维码标签中的canvas标签,保留img标签即可)。

let _canvas = document.querySelector("#codeView canvas");
document.querySelector("#codeView").removeChild(_canvas);

2.生成的图片内容会根据屏幕宽高适配不同的大小,比如app端打印的图片内容大小正常,但是到pc端字体和图片会放大很多倍。这种情况应该是项目加了全局的rem布局适配,需要取消生成图片内容标签的适配转换。像我的项目为了做适配引入了postcss-pxtorem插件,需要在配置文件vue.config.js 或 vite.config.js里面定义一个忽略的类名前缀,然后给需要html标签上面加上这个类名前缀。这样有这个类名前缀的标签就不会做rem转换了,保证了在不同大小屏幕下生成的图片比例一致。

<div class="printCont-Box" >...图片内容...</h5>

在这里插入图片描述
3.一开始没有给html2canvas传配置参数,在pc端调试的一切都正常,后来用安卓机调试发现生成的图片字节很小,图片空白的没有任何内容,后来加了上面一些配置才正常了。
注:本文只列举了一些常用的参数配置,如有需要可访问下方地址查看更多信息。
https://html2canvas.hertzen.com/

三、自定义打印内容插件print-js

1.安装命令

npm i print-js --save

2.页面使用

import printJs from 'print-js';
printJs({printable: 'id01', // 文档来源:pdf或图片url、html元素id、json数据对象type: 'html', // 可选:pdf、html、image、json、raw-htmlcss: '/css/commom.less', // css文件的URL(单个URL字符串或多个URL的数组)style: 'body {padding: 30px;};', // 自定义样式的字符串maxWidth: 1000, // 最大文档宽度(以像素为单位)
});

注:本文只列举了一些常用的参数配置,如有需要可访问下方地址查看更多信息。
https://printjs.crabbly.com/

这篇关于vue二维码生成插件qrcodejs2-fix、html生成图片插件html2canvas、自定义打印内容插件print-js的使用及问题总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/344129

相关文章

Java中JSON格式反序列化为Map且保证存取顺序一致的问题

《Java中JSON格式反序列化为Map且保证存取顺序一致的问题》:本文主要介绍Java中JSON格式反序列化为Map且保证存取顺序一致的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未... 目录背景问题解决方法总结背景做项目涉及两个微服务之间传数据时,需要提供方将Map类型的数据序列化为co

Java Lambda表达式的使用详解

《JavaLambda表达式的使用详解》:本文主要介绍JavaLambda表达式的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言二、Lambda表达式概述1. 什么是Lambda表达式?三、Lambda表达式的语法规则1. 无参数的Lambda表

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Nginx Location映射规则总结归纳与最佳实践

《NginxLocation映射规则总结归纳与最佳实践》Nginx的location指令是配置请求路由的核心机制,其匹配规则直接影响请求的处理流程,下面给大家介绍NginxLocation映射规则... 目录一、Location匹配规则与优先级1. 匹配模式2. 优先级顺序3. 匹配示例二、Proxy_pa

Spring @RequestMapping 注解及使用技巧详解

《Spring@RequestMapping注解及使用技巧详解》@RequestMapping是SpringMVC中定义请求映射规则的核心注解,用于将HTTP请求映射到Controller处理方法... 目录一、核心作用二、关键参数说明三、快捷组合注解四、动态路径参数(@PathVariable)五、匹配请

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Java 枚举的基本使用方法及实际使用场景

《Java枚举的基本使用方法及实际使用场景》枚举是Java中一种特殊的类,用于定义一组固定的常量,枚举类型提供了更好的类型安全性和可读性,适用于需要定义一组有限且固定的值的场景,本文给大家介绍Jav... 目录一、什么是枚举?二、枚举的基本使用方法定义枚举三、实际使用场景代替常量状态机四、更多用法1.实现接

springboot项目中使用JOSN解析库的方法

《springboot项目中使用JOSN解析库的方法》JSON,全程是JavaScriptObjectNotation,是一种轻量级的数据交换格式,本文给大家介绍springboot项目中使用JOSN... 目录一、jsON解析简介二、Spring Boot项目中使用JSON解析1、pom.XML文件引入依

Java中的record使用详解

《Java中的record使用详解》record是Java14引入的一种新语法(在Java16中成为正式功能),用于定义不可变的数据类,这篇文章给大家介绍Java中的record相关知识,感兴趣的朋友... 目录1. 什么是 record?2. 基本语法3. record 的核心特性4. 使用场景5. 自定