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