vue 二维码,打印

安装print-js

//安装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.use(Print)

引用界面

   <a-button  ghost type="primary"  @click="clickPrint" >打印</a-button>
  <div id="printContent" ref="form">
//正常写打印需要的内容样式
 <div class="page" v-for="(item,index) in pageData" :key="index">
        ID:IN{
  {item.applyNo}}
  <span class="content-font" style="height:20px;">附件</span>
 <div class="qrcode" :id="'qrcode'
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在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、付费专栏及课程。

余额充值