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 弹框内容如下

      

      
      

        取消
        下载
      
    

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.htmlTitle
      html2Canvas(document.querySelector('#qrcode'), { // qrcode
        allowTaint: true
      }).then(function(canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const 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 -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      }
      )
    }
  }
}

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