前端實現生成條形碼並下載

莫颀發表於2024-06-21
前端

一、生成條形碼

下載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();
    };
}

相關文章