前端生成二维码和条形码完整方案(附问题处理方案) | 您所在的位置:网站首页 › 表格怎么生成条形码 › 前端生成二维码和条形码完整方案(附问题处理方案) |
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。 本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金 前端插件QRCode.js生成二维码 基本使用 插件安装 cnpm install qrcodejs2 --save // 或者 npm install qrcodejs2 --save 插件导入使用commonjs或者es6模块方式 import QRCode from 'qrcodejs2'; // 或者 let QRCode = require('qrcodejs2');参考资料:👉【说说前端的模块化机制】 页面容器页面增加一个容器标签 实例化 creatQrCode() { let text = '二维码内容'; let qrcode = new QRCode(this.$refs.qrcode, { text: text, //二维码内容字符串 width: 128, //图像宽度 height: 128, //图像高度 colorDark: '#000000', //二维码前景色 colorLight: '#ffffff', //二维码背景色 correctLevel: QRCode.CorrectLevel.H, //容错级别 }) } 问题处理 1、清除已经生成的二维码 方案一:this.$refs.qrcode.innerHTML = ''; 方案二: qrcode.clear(); // 清除二维码方法二 2、动态替换二维码的内容 let string='新的内容' qrcode.makeCode(string) 3、报错提醒 Error: code length overflow ?这是因为url太长,导致二维码加载报错,可以调低容错率来处理。 修改参数:correctLevel: QRCode.CorrectLevel.H ,容错级别,由低到高分别为L M Q H 4、字符串较长,二维码显示模糊怎么办?可以尝试先将生成的二维码倍数扩大,然后在css上面固定显示宽高,这样可以扩大显示像素精度 .qrcode-wrap{ width: 128px; height: 128px; } .qrcode-wrap canvas, .qrcode-wrap img { width:100%; height:100%; } creatQrCode() { let text = '二维码内容'; let qrcode = new QRCode(this.$refs.qrcode, { text: text, width: 128 * 3, //宽扩大3倍 height: 128 * 3, //高扩大3倍 colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H, }) } 5、二维码想要带白边怎么办?插件默认生成的图片是没有边框的 🎨如果只想在页面显示上有边框 方案一:直接给容器上面加样式,利用padding的特性,挤出白边 .qrcode-border{ display: flex; width: 128px; height: 128px; box-sizing: border-box; padding: 10px;/*利用padding*/ border: 1px solid rgb(204, 204, 204); }方案二:给容器加一个带边框样式的父级容器 .qrcode-container{ display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border: 1px solid #cccccc; }🍇效果展示 ✅PS:如果只想【打印】的白边边框,这两种方案也可以 QRCode.js 文档 npm package 地址github 地址 如果想要页面和下载的二维码都带白边边框 可以结合插件html2canvas来实现(如有其它方案,欢迎分享) html2canvas 是一款利用javascript进行屏幕截图的插件 //安装 cnpm install --save html2canvas //引入 import html2canvas from "html2canvas";🎨主要思路: 先使用QRCode生成二维码图片 然后使用html2canvas把带样式的二维码生成新的图片 隐藏QRCode生成的二维码图片 扫一扫PS:完整的代码太多就单独放在飞书文档了,方便查看和复制👉 完整代码 🍒最终效果 html2canvas 文档地址 github 地址 前端插件JsBarcode生成条形码 安装和引入 //安装 cnpm install jsbarcode --save //引入 import JsBarcode from 'jsbarcode' 页面容器 |
CopyRight 2018-2019 实验室设备网 版权所有 |