vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)

安装 node-qrcode

npm install --save qrcode

安装 clipboard

cnpm  i  clipboard  --save

     <el-row>
        <el-col :span="6">
          <el-input
            :readonly="true"
            v-model="contents"
            :id="`channel-url-${canvasIds}`"
          />
        </el-col>
        <el-col :span="6">
          <el-button
            class="copy-button"
            :data-clipboard-target="`#channel-url-${canvasIds}`"
            >复制</el-button
          >
        </el-col>
      </el-row>

onMounted(() => {
  const clipboard = new ClipboardJS('.copy-button')
  clipboard.on('success', (e) => {
    ElMessage.success('复制成功')
    e.clearSelection()
  })
})

file-saver 使用

• 安装file-saver

 cnpm install file-saver --save

组件封装

<template>
 <div id="QRCode" :style="{ width: width, height: height }">
   <canvas :id="canvasId" :style="{ width: width, height: height }"></canvas>
   <div class="flex jc-center">
     <el-row>
       <el-col :span="6">
         <el-input
           :readonly="true"
           v-model="contents"
           :id="`channel-url-${canvasIds}`"
         />
       </el-col>
       <el-col :span="6">
         <el-button
           class="copy-button"
           :data-clipboard-target="`#channel-url-${canvasIds}`"
           >复制</el-button
         >
         <el-button class="configBtn" @click="downLoad" v-if="download"
           >下载二维码</el-button
         >
         <el-button class="jsBtn" @click="jsZip" v-if="jszip">打包</el-button>
       </el-col>
     </el-row>
   </div>
 </div>
</template>

<script setup>
import { onMounted, defineProps, watch, computed, onUnmounted } from 'vue'
import QRCode from 'qrcode'
import ClipboardJS from 'clipboard'
import { ElMessage } from 'element-plus'
import { getCanvasBlob } from '@/hooks/takeScreenshotAndUpload.js'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
const props = defineProps({
 canvasId: {
   type: String,
   default: 'canvasId'
 },
 content: {
   // 二维码中存储的信息
   type: String,
   default: '测试二维码'
 },
 width: {
   type: String,
   default: '200'
 },
 height: {
   type: String,
   default: '200'
 },
 download: {
   type: Boolean,
   default: false
 },
 copy: {
   type: Boolean,
   default: false
 },
 jszip: {
   type: Boolean,
   default: false
 }
})

onMounted(() => {
 initClipboard()
 initCode()
})

onUnmounted(() => {
 destroyClipboard()
})

const contents = computed(() => props.content)
const canvasIds = computed(() => props.canvasId)
// 初始化二维码
const initCode = () => {
 const width = props.width
 const height = props.height
 const el = document.getElementById(props.canvasId)
 QRCode.toCanvas(el, props.content, { width, height }, (error) => {
   console.log(error)
 })
}

// 初始化复制实例
let clipboard
const initClipboard = () => {
 clipboard = new ClipboardJS('.copy-button')
 clipboard.on('success', (e) => {
   ElMessage.success('复制成功')
   e.clearSelection()
 })
}

// 销毁实例
const destroyClipboard = () => {
 // 释放内存
 clipboard.destroy()
}

// 下载文件
let blob
const downLoad = async () => {
 const canvas = document.getElementById(props.canvasId)
 blob = await getCanvasBlob(canvas)
 const fileName = '二维码.png' // 定义文件名称
 saveAs(blob, fileName) // 浏览器下载文件
}

// 打包为zip
const jsZip = () => {
 // 打包下载
 const zip = new JSZip()
 zip.file('说明.txt', '定义txt说明文件')
 zip.file('打包的二维码.png', blob) // 二维码
 // 生成打包
 zip.generateAsync({ type: 'blob' }).then((blob) => {
   saveAs(blob, '打包文件.zip') // 下载打包文件
 })
}

watch(contents, (val) => {
 console.log(val)
 initCode()
})
</script>

<style lang="scss" scoped>
.contents {
 width: 200px;
 margin-bottom: 20px;
 margin-right: 10px;
}
</style>

组件使用

<template>
 <div class="">
   <QRCode
     width="200"
     height="200"
     :content="content"
     :copy="true"
     :download="true"
     :jszip="true"
   ></QRCode>
 </div>
</template>

<script setup>
import { ref } from 'vue'
import QRCode from '@/components/QRCode/index'
const content = ref('测试二维码呀123')
</script>

<style lang="scss" scoped></style>