前端实现生成条形码并下载

一、生成条形码

下载JsBarcode.js库

在对应项目的终端中，输入如下代码，安装：

npm install jsbarcode --save

在二维码生成的页面中引入：

import JsBarcode from "jsbarcode";

使用示例：

<!--    条形码生成的页面-->

<template>
  <div>
    <svg id="barcode"></svg>
  </div>
  <el-button @click="downCode">下载</el-button>
</template>

<script setup>
import {ref, onMounted} from "vue";
import JsBarcode from "jsbarcode";
import {covertSVG2Image} from "@/utils/downloadSVG.js";
import {dayjs} from "element-plus";

const nowDate = ref(dayjs().unix())  //生成时间戳用于下载时的名称显示

onMounted(() => {
  JsBarcode("#barcode", "Hi world!", {
    margin: 10,
    background: "#dddddd"
  });
})

const downCode = () => {
  // 获取生成的 SVG 条形码元素
  let node = document.getElementById('barcode');
  if (node) {
    // 调用 covertSVG2Image 函数时，确保传入正确的参数
    covertSVG2Image(node, `二维码-${nowDate.value}`, node.clientWidth, node.clientHeight);
  }
}

</script>

<style scoped>

</style>

二、下载条形码

封装的下载条形码方法：

/**
 * 将svg导出成图片
 * @param node svg节点 => document.getElementById('barcode');
 * @param name 生成的图片名称
 * @param width 生成的图片宽度
 * @param height 生成的图片高度
 * @param type 生成的图片类型
 */
export const covertSVG2Image = (svgNode, name, width, height, type = 'png') => {
    let serializer = new XMLSerializer();
    let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgNode);
    let image = new Image();
    image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);

    let canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    let context = canvas.getContext('2d');
   
   //!!!!!  此处代码由于受到风控影响，无法直接在此处给出。
   //!!!!!  故使用图片形式在下方图片中给出，请自行将下面图片中的代码内容替换至此处。
    /**
    将此处内容替换为下方图片中的代码
    **/
}

tips: 请将下方代码替换至上述代码片段指定位置