VUE打印每页顶部添加一个二维码

需求

最近公司项目在开发一个 在线合同填写 的功能，要求填写完成之后打印出来，然后签字，再将合同拍照上传到系统中，为了更好的识别区分每一份合同，就要求在打印的时候每一张合同上面都添加一个携带基本信息的二维码。

主要是实现原理

利用table表格以及table中thead标签中的style="display: table-header-group"属性

<thead style="display: table-header-group;"><tr><td><div>需要添加的内容</div></td></tr>
</thead>

完整代码 html

样式可以自行调整

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打印</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 先引入 Vue --><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="./Print.js"></script><!-- 引入 http-vue-loader --><script src="https://unpkg.com/http-vue-loader"></script><script src="./qrcode.min.js"></script><style lang="scss" scoped>@charset "utf-8";* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}html {width: 100%;height: 100%;margin: 0;padding: 0;}body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box;}.el-form-item--medium {margin-bottom: 0 !important;}.el-form-item {margin-bottom: 0}.el-form-item--medium {margin-bottom: 0 !important;}.el-form-item--medium .el-form-item__content {line-height: 28px !important;color: red !important;}h2 {margin: 20px 0;text-align: center;font-size: 24px !important;}.border-bottom-input {border: 0;border-bottom: 1px solid #000;outline: none;font-family: "等线 Light";color: rgb(0, 0, 0);padding: 0;}.border-none-input {padding: 0;border: 0;outline: none;font-family: "等线 Light";color: rgb(0, 0, 0);}input {padding-left: 4px;}.w80px {width: 80px;}.w50 {width: 50%;}.w70 {width: 70%;}.tac {text-align: center;}.list-two {font-family: "等线 Light";color: rgb(0, 0, 0);font-weight: bold;}#printData {height: 100%;max-width: 900px;margin: 0 auto;color: rgb(0, 0, 0) !important;}.contract-box {height: 100%;max-width: 900px;margin: 0 auto;font-family: "等线 Light";color: rgb(0, 0, 0);}.contract-box .el-scrollbar {width: 100%;height: 100%;overflow: hidden;}.contract-box .el-scrollbar ::-webkit-scrollbar {display: none;}.contract-box .scrollbar .el-scrollbar__wrap {overflow: scroll;height: 100%;}.contract-box .contract-content {padding: 0 20px 40px 20px;}.contract-box .contract-content input {font-family: "等线 Light";color: rgb(0, 0, 0);padding-left: 4.5px;}</style>
</head><body><div id="app"><table id="printData" ref="printData"><thead v-show="spOrInp == 'spanTag'" style="display: table-header-group;text-align:right;"><tr><td><div style="margin-left:21px" id="qrcode"></div></td></tr></thead><tbody><tr><td><div class="contract-box"><el-scrollbar class="scrollbar"><div class="contract-content"><h2 id="contractTitle">四川省建筑工人简易劳动合同书</h2><el-form :model="contractInfo" label-position="right" ref="contractForm"><el-form-item prop="corpname"><span>甲方（用工企业）名称：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.corpname" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.corpname }}</span></el-form-item><el-form-item prop="legalman"><span>法定代表人或委托代理人：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.legalman" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.legalman }}</span></el-form-item><el-form-item prop="corpcode"><span>统一社会信用代码：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.corpcode" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.corpcode }}</span></el-form-item><el-form-item prop="corpaddress"><span>单位地址：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.corpaddress" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.corpaddress }}</span></el-form-item><el-form-item prop="linkcellphone"><span>联系电话：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.linkcellphone" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.linkcellphone }}</span></el-form-item><el-form-item prop="nameOrGender"><span>乙方（劳动者）</span><span>姓名：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input"v-model.trim="contractInfo.name" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.name }}</span><span>性别：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input"v-model.trim="contractInfo.gender" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.gender }}</span></el-form-item><el-form-item prop="birthday"><span>出生年月：</span><input class="border-none-input w70" v-model.trim="contractInfo.birthday"placeholder="" /></el-form-item><el-form-item prop="idcardnumber"><span>居民身份证号码：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.idcardnumber" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.idcardnumber }}</span></el-form-item><el-form-item prop="address"><span>家庭住址：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.address" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input ">{{ contractInfo.address }}</span></el-form-item><el-form-item prop="cellphone"><span>联系电话：</span><input v-show="spOrInp == 'inputTag'" class="border-none-input w70"v-model.trim="contractInfo.cellphone" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-none-input">{{ contractInfo.cellphone }}</span></el-form-item><el-form-item>根据《中华人民共和国劳动法》《中华人民共和国劳动合同法》等法律、法规规定，结合本行业实际情况，经甲乙双方平等协商一致，自愿签订本合同，共同遵守。</el-form-item><el-form-item prop="ymdp"><span class="list-two">第一条</span> 本合同从<inputclass="border-bottom-input w80px tac"v-model.trim="contractInfo.contractbegin.year" placeholder="" />年<inputclass="border-bottom-input w80px tac"v-model.trim="contractInfo.contractbegin.month" placeholder="" />月<inputclass="border-bottom-input w80px tac"v-model.trim="contractInfo.contractbegin.day" placeholder="" />日起至<inputv-show="spOrInp == 'inputTag'" class="border-bottom-input w50 tac"v-model.trim="contractInfo.prjname" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-bottom-input tac">{{ contractInfo.prjname }}</span>工程完成结束时止，为本合同的期限终止时间。</el-form-item><el-form-item prop="pwd"><span class="list-two">第二条</span>甲方安排乙方在<input v-show="spOrInp == 'inputTag'"class="border-bottom-input w50 tac"v-model.trim="contractInfo.projectname" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-bottom-input tac">{{ contractInfo.projectname }}</span>（项目名称），从事<input class="border-bottom-input tac"v-model.trim="contractInfo.worktypecode"placeholder="" />工种工作，其职责是<input v-show="spOrInp == 'inputTag'"class="border-bottom-input w50 tac" v-model.trim="contractInfo.duty"placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-bottom-input tac">{{ contractInfo.duty }} </span>。</el-form-item><el-form-item><span class="list-two">第三条</span>乙方应按照本合同规定和甲方的要求，自觉进行工作，按时完成规定的工作数量，达到规定的质量标准。因生产工作需要，双方可协商调整乙方工作。</el-form-item><el-form-item prop="salarypaymentmethod"><span class="list-two">第四条</span> 甲方以下列第<inputclass="border-bottom-input w80px tac"v-model.trim="contractInfo.salarypaymentmethod"placeholder="" />种计算方式支付乙方工资：</el-form-item><el-form-item prop="timewage">1、 计时工资。每月工资为<input class="border-bottom-input w80px tac"v-model.trim="contractInfo.timewage" placeholder="" />元。</el-form-item><el-form-item prop="ww">2、 计件工资。每<input class="border-bottom-input w80px tac"v-model.trim="contractInfo.workload" placeholder="" />（工作量单位）支付工资<inputclass="border-bottom-input w80px tac"v-model.trim="contractInfo.workloadwage" placeholder="" />元。</el-form-item><el-form-item prop="otherwage">3、 其他形式的工资。<input v-show="spOrInp == 'inputTag'"class="border-bottom-input w50 tac"v-model.trim="contractInfo.otherwage" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-bottom-input tac">{{ contractInfo.otherwage }} </span>。</el-form-item><el-form-item prop="payday"><span class="list-two">第五条</span> 甲方于每月<inputclass="border-bottom-input w80px tac" v-model.trim="contractInfo.payday"placeholder="" />日以法定货币支付乙方工资。（如按工作进度预付，余款待工作任务完成后应全部付给）。</el-form-item><el-form-item><span class="list-two">第六条</span>甲方应制作工资发放表并公示，由乙方本人签字确认领取。</el-form-item><el-form-item><span class="list-two">第七条</span>甲方应依法保障乙方职业安全和卫生权益，配备安全生产和职业病防护设施，并向乙方告知劳动安全、职业危害事项，发放符合要求的劳动保护用品。组织上岗前培训，确保乙方持证上岗。</el-form-item><el-form-item><span class="list-two">第八条</span>乙方有权对甲方及其管理人员漠视乙方安全和健康的行为提出批评、检举、控告；有权拒绝违章指挥和强令冒险作业。</el-form-item><el-form-item><span class="list-two">第九条</span> 工作时间</el-form-item><el-form-item prop="workhoursystem">1、甲方根据乙方的岗位，确定乙方执行下列第<input class="border-bottom-input w80px tac"v-model.trim="contractInfo.workhoursystem" placeholder="" />种工时制度。</el-form-item><el-form-item prop="whwd">（1）标准工时制度（每天工作<input class="border-bottom-input w80px tac"v-model.trim="contractInfo.workhour" placeholder="" />小时，每周工作<input class="border-bottom-input w80px tac"v-model.trim="contractInfo.workday" placeholder="" />天）。</el-form-item><el-form-item prop="workirregular">（2）不定时工时制<input v-show="spOrInp == 'inputTag'" class="border-bottom-input w50 tac"v-model.trim="contractInfo.workirregular" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-bottom-input tac">{{ contractInfo.workirregular }} </span>。</el-form-item><el-form-item>2、乙方因岗位变动后，其工时按新岗位的工时制度执行。</el-form-item><el-form-item><span class="list-two">第十条</span> 休息休假</el-form-item><el-form-item>1、甲方应根据乙方的工时制度，安排乙方休息时间。</el-form-item><el-form-item>2、乙方享有国家规定的休假权利。</el-form-item><el-form-item><span class="list-two">第十一条</span>甲方应按国家、省、市有关规定为乙方办理相关保险；发生工伤事故时，甲方应当采取措施及时救治，并积极申请赔偿。</el-form-item><el-form-item prop="welfare"><span class="list-two">第十二条</span>甲方为乙方提供以下福利待遇：<input v-show="spOrInp == 'inputTag'" class="border-bottom-input w50 tac"v-model.trim="contractInfo.welfare" placeholder="" /><span v-show="spOrInp == 'spanTag'" class="border-bottom-input tac">{{ contractInfo.welfare }} </span>。</el-form-item><el-form-item><span class="list-two">第十三条</span>甲乙双方约定的专项协议、劳动合同变更协议及甲方规章制度均作为本合同的附件，与本合同具有同等效力。</el-form-item><el-form-item><span class="list-two">第十四条</span>劳动合同的变更、续订或终止均按《中华人民共和国劳动合同法》有关规定执行。</el-form-item><el-form-item><span class="list-two">第十五条</span>双方因履行本合同发生劳动争议，可协商解决；不愿协商或协商不成的，可以从争议发生之日起30日内向项目所在地劳动争议调解委员会申请调解或依法向劳动争议仲裁委员会申请仲裁。若劳动争议当事人对仲裁裁决不服的，可自收到仲裁裁决书之日起15日内向人民法院提起诉讼。</el-form-item><el-form-item><span class="list-two">第十六条</span>本合同未尽事宜，按国家和省有关法律、法规、规章及甲方依法制定的规章制度执行。</el-form-item><el-form-item><span class="list-two">第十七条</span>本合同自签订之日起生效，甲乙双方各执一份，具有同等法律效力。</el-form-item><el-form-item><el-row><el-col :span="12">甲方：（盖章）</el-col><el-col :span="12">乙方：（签名）</el-col></el-row></el-form-item><el-form-item>法定代表人或<br />委托代理人（签名或盖章）：</el-form-item><el-form-item><el-row><el-col :span="12">________年________月________日</el-col><el-col :span="12">________年________月________日</el-col></el-row></el-form-item></el-form></div></el-scrollbar></div></td></tr></tbody></table><el-button v-show="spOrInp == 'inputTag'" @click='handlePrint'>打印</el-button></div>
</body><!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>// 使用httpVueLoaderVue.use(httpVueLoader);// Vue.use(Print);new Vue({el: '#app',computed: {},data: function () {return {contractInfo: {corpname: "中国打撒爱上团股份有限公司",legalman: "陈晓华",corpcode: "914200006155asdas",corpaddress: "湖北省武汉市解放大道558号葛洲坝大酒店",linkcellphone: "13526536562",name: "曾延蛋",gender: "男",birthday: "1971-12-04",idcardnumber: "532130197112045265",address: "四川省泸州市江阳区方山镇许湾村四社14号",cellphone: "13522653596",contractbegin: {year: "2021",month: "11",day: "12",},prjname: "泸州长江六桥及连接线工程",projectname: "长江滨江路小关门至柏木溪PPP项目",worktypecode: "泥瓦匠",duty: "和水泥",salarypaymentmethod: "1",timewage: "200",workload: "",workloadwage: "",otherwage: "",payday: "30",workhoursystem: "1",workhour: "8",workday: "5",workirregular: "",welfare: "无",},spOrInp: "inputTag",}},mounted() {new QRCode("qrcode", {width: 60,height: 60,text: '二维码内容', // 二维码内容correctLevel: QRCode.CorrectLevel.H // 容错等级});},methods: {handlePrint() {this.spOrInp = "spanTag";setTimeout(() => {print(this.$refs.printData)}, 100);setTimeout(() => {this.spOrInp = "inputTag";}, 2000);},}})
</script></html>

打印文件 Print.js

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {if (!(this instanceof Print)) return new Print(dom, options);this.options = this.extend({'noPrint': '.no-print'}, options);if ((typeof dom) === "string") {this.dom = document.querySelector(dom);} else {this.isDOM(dom)this.dom = this.isDOM(dom) ? dom : dom.$el;}this.init();
};
Print.prototype = {init: function () {var content = this.getStyle() + this.getHtml();this.writeIframe(content);},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";return str;},getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');document.getElementById('contractTitle').style.marginTop="0"for (var k = 0; k < inputs.length; k++) {if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {if (inputs[k].checked == true) {inputs[k].setAttribute('checked', "checked")} else {inputs[k].removeAttribute('checked')}} else if (inputs[k].type == "text") {inputs[k].setAttribute('value', inputs[k].value)} else {inputs[k].setAttribute('value', inputs[k].value)}}for (var k2 = 0; k2 < textareas.length; k2++) {if (textareas[k2].type == 'textarea') {textareas[k2].innerHTML = textareas[k2].value}}for (var k3 = 0; k3 < selects.length; k3++) {if (selects[k3].type == 'select-one') {var child = selects[k3].children;for (var i in child) {if (child[i].tagName == 'OPTION') {if (child[i].selected == true) {child[i].setAttribute('selected', "selected")} else {child[i].removeAttribute('selected')}}}}}return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe = document.createElement('iframe'),f = document.body.appendChild(iframe);iframe.id = "myIframe";//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');w = f.contentWindow || f.contentDocument;doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();var _this = thisiframe.onload = function () {_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)}},toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand('print', false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}document.getElementById('contractTitle').style.marginTop="20px"frameWindow.close();}, 10);} catch (err) {console.log('err', err);}},isDOM: (typeof HTMLElement === 'object') ?function (obj) {return obj instanceof HTMLElement;} :function (obj) {return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';}
};

二维码生成插件 qrcode.js

二维码插件下载地址: https://github.com/davidshimjs/qrcodejs

VUE打印每页顶部添加一个二维码相关推荐

怎样给CSDN博客添加微信二维码
在使用CSDN的过程中,看到一些大佬的微信公众号二维码,扫码很方便关注,作为一般的用户是没有这个功能的,那么是怎么实现的呢?这里以添加微信二维码为例进行举例分析: (1)首先需要将自己的微信二维码上传 ...
CSDN 添加微信二维码
添加微信二维码到任意一篇博客复制二维码链接地址替换到img src 段中 <ul class="panel_head"> <span>感悟</sp ...
如何生成一个二维码？
首先需哟引入一个工具类,有需要的同学可以自行的保存 package com.example.demo.util;import java.awt.BasicStroke; import java.awt ...
一个二维码实现苹果和安卓两个市场安装包自动分发
概述现在的各种市场推广方式,不论是平面的还是多媒体的,都能看到二维码的身影了,可以说是二维码满天飞.扫一扫的方式几乎已经深入人心,这一方面微信可谓功不可没,现在也是树敌无数(如果这一句你不懂,请继续 ...
中文错别字检查添加了二维码入口
中文错别字检查添加了二维码入口最近在研究了一下有特色二维码的生成, 于是借用到了中文错别字检查页面上了, 就是下面的这幅图片,怎么样,图中的 CBZ 三个字母还是清晰可以辨认的吧? 还准备把更多的 ...
一个二维码矢量绘制方法的记录
使用第三方的开源二维码生成工具:DataMatrix.net 以及 Zxing.Net 一.基本思路普遍情况,网络上已有的例子,一般情况都是生成Bitmap位图的方式,该方式在放大.缩小.打印的情况 ...
一个二维码扫描自动识别下载应用
由一个二维码,或进入同一个页面自动识别手机或电脑系统以及浏览器,根据不同的应用自动识别下载: 例如二维码信息或下载页的连接地下为www.xxx.com/download.html,那么此downloa ...
这就是视频列表二维码，一个二维码搞定视频列表播放
文章原创转载请注明出处来自CSDN 2020-1-5 // 我是视频砖家,只关注视频应用. 我以前写视频二维码的教程,今天再上一个原创的视频列表二维码教程吧 // 视频列表二维码教程基于酷播云 ...
自己整理的vue实现生成分享海报（含二维码），看着网上的没实现
大家好,我是雄雄. 前言相信大家在许多的场景下,看到过这样的案例. 当我们在某购物app上看好一件商品,想分享给别人时,app会给我们生成一张海报,我们将其保存在手机里面转发给其他人达到分享. 当我 ...

VUE打印每页顶部添加一个二维码

目录

需求

主要是实现原理

完整代码 html

打印文件 Print.js

二维码生成插件 qrcode.js

VUE打印每页顶部添加一个二维码相关推荐

最新文章

热门文章

VUE打印 每页顶部添加一个二维码

目录

需求

主要是实现原理

完整代码 html

打印文件 Print.js

二维码生成插件 qrcode.js

VUE打印 每页顶部添加一个二维码相关推荐

最新文章

热门文章

VUE打印每页顶部添加一个二维码

VUE打印每页顶部添加一个二维码相关推荐