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

最新推荐文章于 2023-05-06 06:42:23 发布

原创最新推荐文章于 2023-05-06 06:42:23 发布

· 737 阅读

3 ·

版权

文章标签：

#vue #二维码 #下载

vue 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何利用qrcode、file-saver和jszip这三个npm包来生成二维码并进行下载。首先，通过npm安装所需依赖，然后在页面中导入并使用这些库。不仅可以生成二维码的dataURL和展示在canvas上，还能将其转换为blob并保存为图片。此外，还展示了如何将二维码打包成zip文件供用户下载，同时提供了txt说明文件的添加方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要实现二维码的生成及下载，使用到的插件 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') // 下载打包文件
 })