vue二维码周围加文字。并实现打印功能。可运行Demo

已于 2023-08-01 09:41:59 修改
阅读量499 收藏 2
点赞数 1
文章标签： vue.js javascript 前端
于 2023-04-21 15:20:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52753722/article/details/130289105
版权

安装两个插件：一个是生成二维码的，一个是打印的插件

npm install qrcodejs2 --save; 
npm install vue-print-nb;

Vue全局引用打印插件，方便使用。：

import Print from 'vue-print-nb' 
Vue.use(Print)

vue页面需要引入生成二维码插件：

import QRCode from 'qrcodejs2'

Vue页面的template代码：

<div>
      <div id="printTest">
        <div id="SetQRCode" style="page-break-after:always"></div>
        <div id="SetQRCode2" style="page-break-after:always"></div>
        <div id="SetQRCode3" style="page-break-after:always"></div>
      </div> <button v-print="'#printTest'">打印</button>
    </div>

js代码：

import QRCode from 'qrcodejs2'

/* vue生命周期函数*/
 mounted() {
    this.$nextTick(function () {
      this.testQRCode();
    })

  },
methods: {
    /* documentName绑定的是template中div的id，size是二维码的大小,qrText是扫描出来的文字，obj是需要传递的对象 */
    canvasEWM(documentName, size, qrText, obj) {
     
      // let qrcodeDiv = document.getElementById(documentName)
      let qrcode = new QRCode(document.getElementById(documentName), {
        text: qrText,
        width: size,
        height: size,
        colorDark: "#000",
        //容错率，L/M/H L最高
        correctLevel: QRCode.CorrectLevel.L 
      });

      var canvas = qrcode._el.firstChild;
      var ctx = canvas.getContext("2d");
      // 字体 粗体 格式
      const fontWeight = 'bold' 
      // 字体大小
      const fontSize = 14 
      // 底部文字上下间距
      const tb = 5 
      /* 右侧扩容宽度 */
      const addWidth = 200;
      // 文字行高
      const wenzilieheight = fontSize + 2 * tb;
      //实际高度 二维码的高度 200 +标签高度+ERP码的高度
      const realHeight = size + (fontSize + 2 * tb) * 2
      const realWidth = size + fontSize + 2 * tb + addWidth //实际宽度

      /* =============================设置二维码数据 =============================*/
      // 获取二维码数据
      const data = ctx.getImageData(0, 0, size, size);
      ctx.fillStyle = "#fff"
      canvas.setAttribute('height', realHeight); // 重设画布像素高度
      canvas.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
      canvas.setAttribute('width', realWidth); // 重设画布像素宽度
      canvas.style.setProperty('width', realWidth + 'px'); // 重设画布实际宽度
      ctx.fillRect(wenzilieheight, wenzilieheight, size, size)
      ctx.putImageData(data, wenzilieheight, wenzilieheight)// 填充二维码数据
      ctx.font = `${fontWeight} ${fontSize}px Arial`;
      //文字真实宽度
      const textWidth = ctx.measureText("山东冶金科学院物料标签").width;
      /* =============================设置标签 =============================*/
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      /* 设置底部填充位置 */
      ctx.fillRect(0, 0, realWidth, wenzilieheight);
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText(qrText, (size - textWidth) / 2, 0)
      /* =============================流水码 =============================*/
      // 根据字体大小计算文字left
      const fleft = (size - textWidth) / 2;
      const ftop = size + wenzilieheight + tb; //文字距顶部位置
      const textPadding = fontSize / 2; //字体边距为字体大小的一半可以自己设置
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      /* 设置底部填充位置 */
      ctx.fillRect(wenzilieheight, size + wenzilieheight, size, realHeight - 2 * tb);
      // 设置字体填充位置
      ctx.fillRect(
        fleft,
        ftop,
        textWidth + textPadding,
        fontSize + textPadding
      );
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText("ERP流水码", fleft, ftop)

      /* =============================设置右侧数据============================= */
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      /* 设置右侧填充位置 */
      let rightX = size + wenzilieheight * 2;
      let rightY = 40;
      /*========名称小件======= */
      ctx.fillRect(rightX, rightY, size, realHeight - 2 * tb);
      // 设置字体填充位置
      ctx.fillRect(
        rightX,
        rightY,
        textWidth + textPadding,
        fontSize + textPadding
      );
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText("名称：" + obj.materialName, rightX, rightY)
      /*========规格小件 绘制小件的时候每次都向下移动40个======= */
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      rightY += 40
      ctx.fillRect(rightX, rightY, size, realHeight - 2 * tb);
      // 设置字体填充位置
      ctx.fillRect(
        rightX,
        rightY,
        textWidth + textPadding,
        fontSize + textPadding
      );
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText("规格：" + obj.specification, rightX, rightY)
      /*========成分小件======= */
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      rightY += 40
      ctx.fillRect(rightX, rightY, size, realHeight - 2 * tb);
      // 设置字体填充位置
      ctx.fillRect(
        rightX,
        rightY,
        textWidth + textPadding,
        fontSize + textPadding
      );
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText("成分：" + obj.composition, rightX, rightY)
      /*========国别小件======= */
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      rightY += 40
      ctx.fillRect(rightX, rightY, size, realHeight - 2 * tb);
      // 设置字体填充位置
      ctx.fillRect(
        rightX,
        rightY,
        textWidth + textPadding,
        fontSize + textPadding
      );
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText("国别：" + obj.country, rightX, rightY)
      /*========状态小件======= */
      // 设置底部背景色
      ctx.fillStyle = "#fff";
      rightY += 40
      ctx.fillRect(rightX, rightY, size, realHeight - 2 * tb);
      // 设置字体填充位置
      ctx.fillRect(
        rightX,
        rightY,
        textWidth + textPadding,
        fontSize + textPadding
      );
      ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
      ctx.fillStyle = "#333";// 字体颜色
      ctx.fillText("状态：" + obj.status, rightX, rightY)


    },
    testQRCode() {
      this.canvasEWM("SetQRCode", 200, "物料标签1", { composition: "123", materialName: "123", specification: "15*12*13", country: "中国", "status": "正常" });
      this.canvasEWM("SetQRCode2", 200, "物料标签12", { composition: "456", materialName: "456", specification: "15*12*13", country: "美国", "status": "正常" });
      this.canvasEWM("SetQRCode3", 200, "物料标签3", { composition: "789", materialName: "789", specification: "15*12*13", country: "澳大利亚", "status": "不正常" });
    },
}

qq_52753722
关注
使用vue3 + vue-qr 生成二维码（可添加logo和文字）vue3生成二维码
LiYinghao_的博客
01-23 3409
【代码】vue3 + vue-qr 生成二维码（可添加logo）；vue中生成二维码，中心带logo；vue3中生成二维码。
vue 二维码，打印
sinat_42501006的博客
04-22 1856
//安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js@版本号 --save // 全局安装 npm install print-js --save -g 安装qrcodejs2 npm install qrcodejs2 --save main.js import Print from 'vue-printjs' Vue....
vue实现二维码批量生成和打印
最新发布
yue200403的博客
08-27 498
实现一个可以根据数据批量生成二维码标签页个批量打印标签页的组件。难点在于，文字和二维码如何合成一张图片进行打印，因为生成的二维码是图片，但文字和二维码整个内容其实是一个div。
vue二维码生成及添加底部文字 下载功能实现
qq_44448995的博客
10-26 1354
vue二维码生成及添加底部文字 下载功能实现
vue启用打印机打印-二维码条形码打印
qq_41206305的博客
10-11 1166
使用px来设置距离需谨慎，相同px在不同纸张呈现大小可能是不相同的。小距离的变动px是无法呈现的。（举个栗子：在某一纸张上1px=0.3mm，此时我只想上移0.2mm）构建所需要打印的内容，利用vue-print-nb进行打印。二维码条形码打印的本质就是图片打印。注意：在页面上设置的样式打印时是没效果的，这里需要用过媒体查询来设置样式。所需插件 vue-print-nb 本文版本1.7.5。资产、设备管理必备的二维码条形码打印。
vue生成条形码和二维码并打印
mbrains的博客
03-17 2633
生成条形码和二维码合成标签并打印
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询...
vue 使用qrcodejs2生成二维码及打印功能实现
06-26
demo示例
vue-scan-demo-master.zip_vue_vue scane免费版_vue 二维码_vue扫描 二维码_vue读
07-14
vue实现扫描二维码功能，大家可以看看。
vue实现扫码功能
01-21
最近在项目中碰见一个打开...demo地址：vue-scan-demo 代码实现： <div xss=removed></div> <p class=tip>...载入中... <button @click=startRecognize>1.创建控件</button> <button
生成一维码二维码并调用打印机打印
07-28
生成一维码二维码并调用打印机打印
QRCodeLogin:【二维码登录】基于SpringBoot + Vue + Android的二维码扫码登录；服务器端，网页前端和安卓端源码；
03-22
一个能够实现扫码登录的demo，不妨小小Star一下吧>。<〜，请戳。 本项目一共包含三份原始码，即服务器端，网页前端和移动端。 项目请戳，APP安装包或请戳： 网页和APP预设登录账号：123456，密码：123456。 ...
vue二维码生成、打印及识别
菜鸟成长之路
03-01 1623
这是二维码扫描区域，v-if="qrcodeshow"可以用来控制摄像头的开关（最开始没加导致摄像头一直处于被占用状态）js原生的windows.print()会将整个页面打印出来，所以使用。安装并在main.js或index.js中注册。批量创建二维码及打印，所以加了个v-for。引入QrcodeStream。点击生成二维码按钮执行。引入QRCode模块。
vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码
意初的博客
09-06 865
vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码，import print from 'vue3-print-nb' directives: { print } //自定义指令中注册。vue3安装 npm install vue3-print-nb --save。vue2安装 npm install vue-print-nb --save。directives: { print} //自定义指令中注册。//vue2 引入方式 全局 main.js。
vue生成二维码并打印
userpdk的博客
08-04 432
【代码】vue生成二维码并打印。
vue 批量打印二维码含LOGO图片
灰色头像@的博客
09-06 704
实现效果如下图↓。
vue使用qrcode生成二维码，并在二维码下面添加文字描述
xw245184020的专栏
08-19 5629
vue使用qrcode生成二维码，并在二维码下面添加文字描述
vue2实现生成二维码和复制保存图片功能(复制的同时会给图片加文字)
weixin_68658847的博客
05-06 1007
vue2实现生成二维码和复制保存图片功能(复制的同时会给图片加文字)
vue 生成二维码并打印
05-17
要在Vue中生成二维码并打印，你可以使用qrcode.js和html2canvas库。下面是一个简单的实现示例： 1. 安装qrcode.js和html2canvas ```bash npm install qrcodejs2 html2canvas --save ``` 2. 在Vue组件中引入库 ```javascript import QRCode from 'qrcodejs2' import html2canvas from 'html2canvas' ``` 3. 在Vue组件中定义一个函数来生成二维码 ```javascript generateQRCode() { const qrcode = new QRCode('qrcode', { text: 'https://www.example.com', // 二维码内容 width: 256, // 二维码宽度 height: 256, // 二维码高度 colorDark : '#000000', // 二维码颜色 colorLight : '#ffffff', // 二维码背景色 correctLevel : QRCode.CorrectLevel.H // 二维码纠错级别 }) } ``` 4. 在Vue组件中定义一个函数来打印页面 ```javascript print() { html2canvas(document.body).then(canvas => { const printWindow = window.open('', 'Print', 'height=600,width=800') printWindow.document.write('<html><head><title>Print</title></head><body></body></html>') printWindow.document.body.appendChild(canvas) printWindow.document.close() printWindow.print() }) } ``` 5. 在Vue组件中使用生成二维码和打印页面的函数 ```vue <template> <div> <div id="qrcode"></div> <button @click="generateQRCode">生成二维码</button> <button @click="print">打印页面</button> </div> </template> <script> import QRCode from 'qrcodejs2' import html2canvas from 'html2canvas' export default { methods: { generateQRCode() { const qrcode = new QRCode('qrcode', { text: 'https://www.example.com', // 二维码内容 width: 256, // 二维码宽度 height: 256, // 二维码高度 colorDark : '#000000', // 二维码颜色 colorLight : '#ffffff', // 二维码背景色 correctLevel : QRCode.CorrectLevel.H // 二维码纠错级别 }) }, print() { html2canvas(document.body).then(canvas => { const printWindow = window.open('', 'Print', 'height=600,width=800') printWindow.document.write('<html><head><title>Print</title></head><body></body></html>') printWindow.document.body.appendChild(canvas) printWindow.document.close() printWindow.print() }) } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值