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

一、生成条形码

下载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');

    image.onload = function () {
        // 确保绘制图像时，图像的宽高与 Canvas 的宽高一致
        context.drawImage(image, 0, 0, width, height);
        let a = document.createElement('a');
        a.download = `${name}.${type}`;
        // 确保 toDataURL 的类型是小写的
        a.href = canvas.toDataURL(`image/${type}`);
        a.click();
    };
}