首页 > 其他分享 >前端打印二维码

前端打印二维码

时间:2023-11-16 17:56:11浏览次数:25  
标签:canvas qr 前端 打印 js html2canvas 二维码

1、安装生成二维码的插件 vue-qr

yarn add vue-qr
// or
npm install vue-qr --save

2、安装用于将html代码生成图片的插件 html2canvas

yarn add html2canvas
// or
npm install html2canvas --save

3、安装用于打印js库 print-js

yarn add print-js
// or
npm install print-js --save

HTML

拉起的弹窗

 <el-dialog
      class="pageDialog"
      title="商户码"
      :visible.sync="tenantCodeShow"
      width="608px"
      :close-on-click-modal="false"
      @close="onCancelCode"
    >
      <div class="img_view" ref="imgView">
        <div class="img_code">
          <!-- 二维码 -->
          <vue-qr
            :correctLevel="3"
            :dotScale="1"
            :margin="0"
            colorDark="#0794EE"
            :size="190"
            :binarizeThreshold="254"
            :logoScale="0.3"
            :logoCornerRadius="40"
            :text="codeValue"
            :logoSrc="bg.src"
          />
        </div>
      </div>

      <template #footer>
        <div class="dialogFooter">
          <div class="cancel" @click="onCancelCode">取消</div>
          <div class="submit" @click="onSubmitCode">打印</div>
        </div>
      </template>
    </el-dialog>

页面引入

import M2canvas from "html2canvas";//这是js方法
import vueQr from "vue-qr";//这是二维码
import printJs from "print-js";

打印功能JS

  onSubmitCode() {
      let imgTag = this.$refs["imgView"],
      // 生成canvas前的参数配置,详细配置信息请参考官方文档
        params = {
          dpi: window.devicePixelRatio * 2 /* DPI 清晰度 */,
          scale: 2 /* 放大倍数 */,
          // with: 700,
          // height:67,
          useCORS: true,
        };
      // 生成canvas图片文件流信息
      M2canvas(imgTag, params).then((canvas) => {
        // 生成用于展示的数据地址
        printJs({
          printable: canvas.toDataURL(),
          type: "image",
          // header: `<h1 style="font-size: 22px; text-align: center; color: #333;">${this.tInfo.name}</h1>`,
          documentTitle: this.tInfo.name, // 打印文档的标题this.tInfo.name-自定义标题
        });
      });
      this.tenantCodeShow = false;
    },

css

 .img_view {
    width: 100%;
    height: 730px;
    background: url("~@/assets/images/merchantCode.png") no-repeat center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    position: relative;
    // 设置二维码图片的位置、大小和样式
    .img_code {
      background: #fff;
      border-radius: 16px;
      position: absolute;
      top: 66.5%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .img_modal {
      text-align: center;
    }
  }

标签:canvas,qr,前端,打印,js,html2canvas,二维码
From: https://www.cnblogs.com/xuelinomen/p/17836895.html

相关文章

  • 打印机
    打印机的品牌1、惠普、佳能、联想、华为(面试时就说佳能) 打印机的种类喷墨打印机激光打印机 喷墨打印机喷墨打印机的安装1、安装墨盒、彩色墨盒安装在左侧,黑色墨盒安装在右侧2、纸张导片固定纸张3、安装驱动搜索相对应的打印机品牌型号驱动进行安装......
  • 有趣的前端代码
    #随机位置随机颜色的点<script>setInterval(function(){vardot=document.createElement("div");dot.style.position="fixed";dot.style.top=Math.random()*100+"%";dot.style.left=Math.random()*100+......
  • git拉取项目失败怎么办? 前端vue2 都需要install 什么依赖
    gitconfig--list--show-origin查看git文件下面所有对应文件目录下面是设计配置文件http的缓存大小和那个最低时间和速度gitconfig--globalhttp.lowSpeedTime999999gitconfig--globalhttp.lowSpeedLimit0gitconfig--globalhttp.postBuffer1048576000 ......
  • 打印表格图片发黑,如何处理
    先创建一个WORD空白页,插入要打印的图片将布局设为【浮于文字上方】图片设置......
  • 微前端 micro-app 传参、通信
    微前端micro-app传参、通信 环境及配置,参考:https://www.cnblogs.com/1285026182YUAN/p/17828681.html 1. 应用传参主应用:<template><divclass="container"><micro-appname="my-app-page1"url="http://localhost:5173/stand&quo......
  • Java流程控制12:打印三角形及Debug
    publicclassTestDemo{publicstaticvoidmain(String[]args){//打印三角形5行for(inti=1;i<=5;i++){for(intj=5;j>=i;j--){System.out.print("");}for(intj=......
  • 前端知识 汇总
    CORS CORS是一个W3C标准,全称是"跨域资源共享"(Cross-originresourcesharing)跨域资源共享CORS详解。看名字就知道这是处理跨域问题的标准做法。CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。Vue双向绑定原理......
  • c#调用Bartender标签模板打印
    Bartender标签打印软件挺好用的,模板可视化,参数也好调整,我用的是这个版本 先在电脑上装好Bartender软件然后在VS项目中,添加引用,选择COM组件,搜索Bartender,确定引用BarTender10.1 在项目中创建BarTenderPrint类///<summary>///打印标签类///</summary......
  • Java Mysql 类型为Long 转 前端String
    一、背景JavaMysql类型为Long转前端会丢失精度,在原先基础上补0000;二、实现1.//@JsonSerialize(using=ToStringSerializer.class)但是对我这里是不生效的@JSONField(serializeUsing=com.alibaba.fastjson.serializer.ToStringSerializer.class)生效三、遇......
  • 今日故障-打印机不在线
    打印机故障(2)2021-07-0614:22今天在家休息,一个同事着急忙慌的打来电话说:“我的打印机怎么用不了了呢?”,经过简单的询问分析出了几个可能出现的问题。由于业务紧迫,心想最好立即解决,于是前去查看,果然不出所料。这是查看硬件接口的界面,发现有一个异常(图中感叹号) 担......