vue 二维码生成、打包或单个下载

主要实现二维码的生成及下载，使用到的插件 qrcode、file-saver、jszip

1、npm 包安装

  npm -s i qrcode file-saver   jszip

2、在页面中使用

 

import JSZip from 'jszip'
import fileSaver from 'file-saver'
import QRCode from 'qrcode'

生成二维码

const options = {
        errorCorrectionLevel: 'H',
        margin: 0,
        height: 160,
        width: 160,
        scal: 177,
        color: { dark: '#000' },
        rendererOpts: { quality: 0.9 },
      }
// 生成二维码 通过image显示 :src="qrcode"
this.qrcode = await QRCode.toDataURL(path, options) 
const canvas = await QRCode.toCanvas(path, options)  
const blob = await new Promise((resolve) => {
        canvas.toBlob((blob) => {
          resolve(blob)
        })
      })
const fileName = `二维码.png` // 定义文件名称
fileSaver.saveAs(blob, fileName) // 浏览器下载文件

// 打包下载
const zip = new JSZip()
zip.file('说明.txt', '定义txt说明文件')
zip.file(fileName , blob) // 二维码

生成打包
zip.generateAsync({ type: 'blob' }).then(blob => {
    fileSaver.saveAs(blob, '打包文件.zip') // 下载打包文件
 })