vue前端生成二维码并导出PDF

1.安装插件

npm install --save qrcodejs2 （这是生成微信二维码插件）
npm install html2canvas jspdf --save （这是将html页面转化为pdf插件）

2.先生成微信二维码，并放入dialog弹框中

2.1 import QRCode from ‘qrcodejs2’
2.2 点击查看二维码事件中调初始化二维码的方法

 exportPdfHandle() {this.hasPDFModal = true// 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接// this.qrCode = 'https://yuchengkai.cn/docs/frontend/#typeof'// 使用$nextTick确保数据渲染this.$nextTick(() => {this.crateQrcode()})},// 生成二维码crateQrcode() {const aa = this.qrCode // 不能直接用data里面的数据this.qrCode，要先存一下再使用，这是个坑，我也不知道为啥this.$refs.qrcode.innerHTML = ''new QRCode(this.$refs.qrcode, {width: 150,height: 150, // 高度// text: this.qrcode, // 二维码内容text: aa,colorDark: '#000000',colorLight: '#ffffff'// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f'// foreground: '#ff0'})},

2.3 dialog 弹框内容如下

<el-dialog:visible.sync="hasPDFModal"width="60%":before-close="handleClose"title="下载凭证预览"center><div id="qrcode" ref="qrcode" /><!-- <voucherPdf id="pdfDom" :voucher-info="voucherInfo" :qr-code="qrCode" /> --><div slot="footer"><el-button @click="hasPDFModal = false;">取消</el-button><el-button type="primary" @click="getPdf('#qrcode');hasPDFModal = false;">下载</el-button></div></el-dialog>

3.全局配置下载pdf的方法getPdf

3.1 main.js配置

import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

3.2新建一个全局的下载pdf的js(注意：#qrcode，要和页面的id保持一致，

)

/** @Description:* @Autor: fuxiaojie* @Date: 2022-03-31 11:14:13* @LastEditTime: 2022-03-31 16:27:58*/
/** @Description:前端导出pdf* @Autor: * @Date: 2022-03-31 11:04:19* @LastEditTime: 2022-03-31 11:04:20*/
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue, options) {Vue.prototype.getPdf = function() {var title = this.htmlTitlehtml2Canvas(document.querySelector('#qrcode'), { // qrcodeallowTaint: true}).then(function(canvas) {const contentWidth = canvas.widthconst contentHeight = canvas.heightconst pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0const imgWidth = 595.28const imgHeight = 592.28 / contentWidth * contentHeightconst pageData = canvas.toDataURL('image/jpeg', 1.0)const PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}
}

4，直接点击下载按钮即可实现下载含有二维码的pdf操作

vue前端生成二维码并导出PDF相关推荐

vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
vue 前端生成二维码，并转换为图片
这篇文章主要是分享下自己的收获,也是自己遇到的问题: 前端如何自己生成二维码? 前端如何将生成的二维码转成图片并展示? 如何控制二维码的显隐? 话不多说,直接上干货 base64如何转换成图片 npm ...
vue前端生成二维码列表
<div v-for="(item,idx) in dataList" :key="idx"><div :id="`qrcode${ ...
vue前端生成二维码并提供二维码下载
在一个管理后台的开发过程中使用到了需要前端自行生成分享二维码,并提供二维码下载功能,网上的解决方案很多,最终自己做完的思路和代码整理记录方便后续学习使用! vue版本为2.x 具体实现步骤: 下载安装 ...
Vue前端生成二维码（qrcode）
1.首先安装qrcode npm install --save qrcodejs2 2.引用 import QRCode from 'qrcodejs2' 3.使用 <div class=&qu ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
vue实现生成二维码，并生成图片
vue实现生成二维码,并生成图片 1.安装插件 npm install qrcodejs2 --save npm install --save html2canvas 2.导包 import html ...