QRCODE \u7522\u751f\u5668<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.0\/dist\/JsBarcode.all.min.js\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bwip-js\/3.3.0\/bwip-js-min.js\"><\/script>\n <style>\n \/* \u7a0d\u5fae\u7f8e\u5316\u5377\u8ef8\u8207\u904e\u6e21\u6548\u679c *\/\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }\n input, select, button { transition: all 0.2s ease; }\n input:focus, select:focus { \n outline: none; \n border-color: #0061b7; \n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); \n }\n \/* \u78ba\u4fdd\u7522\u751f\u7684\u5716\u7247\u7f6e\u4e2d *\/\n #qr-container img {\n margin: auto;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-100 min-h-screen flex items-center justify-center p-4 md:p-8\">\n\n \n <div class=\"bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden border border-slate-100\">\n \n \n <div class=\"bg-[#0061b7] p-5 text-center flex justify-between items-center px-8\">\n <h1 class=\"text-2xl font-bold text-white tracking-wider mx-auto\">\u689d\u78bc\u7522\u751f\u5668<\/h1>\n <\/div>\n\n <div class=\"p-6 md:p-8 flex flex-col gap-6\">\n \n \n <div class=\"flex bg-white p-1 rounded-lg w-full max-w-full mx-auto shadow-sm border border-[#0061b7] gap-1 overflow-x-auto\">\n <button id=\"btn-qr\" onclick=\"switchMode('qr')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-[#0061b7] !text-white !border-none shadow-sm transition-all whitespace-nowrap\">QR Code<\/button>\n <button id=\"btn-barcode\" onclick=\"switchMode('barcode')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\">\u4e00\u7dad\u689d\u78bc<\/button>\n <button id=\"btn-ean\" onclick=\"switchMode('ean')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\">EAN<\/button>\n <button id=\"btn-datamatrix\" onclick=\"switchMode('datamatrix')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\">DataMatrix<\/button>\n <\/div>\n\n \n <div class=\"flex flex-col items-center justify-center bg-slate-50 rounded-xl p-6 border-2 border-dashed border-slate-300 min-h-[300px] relative\">\n <div id=\"qr-container\" class=\"bg-white p-4 rounded-xl shadow-sm min-w-[250px] min-h-[250px] flex items-center justify-center\">\n \n <\/div>\n \n <canvas id=\"barcode-container\" class=\"hidden bg-white p-4 rounded-xl shadow-sm max-w-full\"><\/canvas>\n \n <canvas id=\"ean-container\" class=\"hidden bg-white p-4 rounded-xl shadow-sm max-w-full\"><\/canvas>\n \n <canvas id=\"datamatrix-container\" class=\"hidden bg-white p-4 rounded-xl shadow-sm max-w-full\"><\/canvas>\n\n \n <div class=\"mt-5 flex flex-col sm:flex-row items-center gap-3 w-full max-w-lg\">\n \n <div class=\"flex-1 text-center text-sm font-mono text-slate-800 bg-slate-200\/50 px-4 py-2.5 rounded-lg w-full break-all\" id=\"url-preview\" title=\"\u6e96\u5099\u751f\u6210...\">\n \u6e96\u5099\u751f\u6210…\n <\/div>\n <button id=\"downloadBtn\" onclick=\"downloadCode()\" class=\"w-full sm:w-auto flex-shrink-0 h-10 px-6 !bg-[#0061b7] hover:!bg-[#004c8f] !text-white font-medium rounded-lg flex items-center justify-center gap-2 active:scale-95 transition-transform shadow-md !border-none\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg>\n \u4e0b\u8f09\u5716\u7247\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col gap-3\">\n <label class=\"block text-sm font-bold text-slate-700\">\u8acb\u8cbc\u4e0a\u7db2\u5740\u6216\u6587\u5b57\uff1a<\/label>\n <div class=\"relative\">\n <textarea id=\"qr-input\" rows=\"3\" placeholder=\"\u5728\u6b64\u8cbc\u4e0a\u60a8\u8907\u88fd\u7684\u7db2\u5740\u6216\u6587\u5b57\" class=\"w-full p-4 bg-white border border-slate-300 rounded-xl text-slate-700 placeholder-slate-400 focus:ring-2 focus:ring-[#0061b7] focus:border-[#0061b7] transition-all resize-none shadow-sm\"><\/textarea>\n \n <button onclick=\"pasteFromClipboard()\" class=\"absolute bottom-3 right-3 !bg-[#0061b7] hover:!bg-[#004c8f] !text-white px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1 shadow-sm !border-none\" title=\"\u4e00\u9375\u8cbc\u4e0a\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/>\n <\/svg>\n \u8cbc\u4e0a\n <\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u521d\u59cb\u5316\u8b8a\u6578\n let qrcode = null;\n let currentMode = 'qr'; \/\/ \u9810\u8a2d\u70ba QR Code \u6a21\u5f0f\n\n \/\/ \u5207\u63db\u6a21\u5f0f\u51fd\u6578\n function switchMode(mode) {\n currentMode = mode;\n const modes = ['qr', 'barcode', 'ean', 'datamatrix'];\n \n modes.forEach(m => {\n const btn = document.getElementById(`btn-${m}`);\n const container = document.getElementById(`${m}-container`);\n \n if (m === mode) {\n \/\/ \u9078\u53d6\u72c0\u614b\uff1a\u85cd\u5e95\u767d\u5b57\uff0c\u5f37\u5236\u53d6\u6d88\u5916\u90e8\u908a\u6846\u5f71\u97ff\uff0c\u653e\u5927\u5b57\u9ad4\n btn.className = \"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-[#0061b7] !text-white !border-none shadow-sm transition-all whitespace-nowrap\";\n if (m === 'qr') {\n container.classList.remove('hidden');\n container.classList.add('flex');\n } else {\n container.classList.remove('hidden');\n }\n } else {\n \/\/ \u672a\u9078\u53d6\u72c0\u614b\uff1a\u767d\u5e95\u85cd\u5b57\uff0c\u5f37\u5236\u53d6\u6d88\u5916\u90e8\u908a\u6846\u5f71\u97ff\uff0c\u653e\u5927\u5b57\u9ad4\n btn.className = \"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\";\n container.classList.add('hidden');\n if (m === 'qr') container.classList.remove('flex');\n }\n });\n generateCode(); \/\/ \u5207\u63db\u6642\u91cd\u65b0\u751f\u6210\n }\n\n function generateCode() {\n \/\/ \u76f4\u63a5\u53d6\u5f97\u55ae\u4e00\u8f38\u5165\u6846\u7684\u503c\uff0c\u4e26\u5229\u7528 trim() \u53bb\u9664\u524d\u5f8c\u4e0d\u5fc5\u8981\u7684\u7a7a\u767d\n const fullText = document.getElementById('qr-input').value.trim();\n\n \/\/ \u66f4\u65b0\u756b\u9762\u4e0a\u7684\u6587\u5b57\u9810\u89bd\n const previewEl = document.getElementById('url-preview');\n previewEl.textContent = fullText ? fullText : '\u8acb\u8f38\u5165\u6216\u8cbc\u4e0a\u5167\u5bb9...';\n previewEl.title = fullText;\n\n \/\/ \u5982\u679c\u6c92\u6709\u5167\u5bb9\uff0c\u6e05\u7a7a\u756b\u9762\n if (fullText.length === 0) {\n document.getElementById('qr-container').innerHTML = '';\n \n ['barcode-container', 'ean-container', 'datamatrix-container'].forEach(id => {\n const canvas = document.getElementById(id);\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n });\n \n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n return;\n }\n\n if (currentMode === 'qr') {\n \/\/ \u6e05\u7a7a\u4e26\u751f\u6210 QR Code\n const container = document.getElementById('qr-container');\n container.innerHTML = '';\n qrcode = new QRCode(container, {\n text: fullText,\n width: 220, \n height: 220,\n colorDark : \"#000000\", \/\/ \u6539\u56de\u9ed1\u8272\n colorLight : \"#ffffff\",\n correctLevel : QRCode.CorrectLevel.M\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } else if (currentMode === 'barcode') {\n \/\/ \u751f\u6210\u4e00\u7dad\u689d\u78bc (Code128)\n try {\n JsBarcode(\"#barcode-container\", fullText, {\n format: \"CODE128\",\n lineColor: \"#000000\", \/\/ \u6539\u56de\u9ed1\u8272\n width: 2,\n height: 100,\n displayValue: true,\n margin: 10\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } catch (error) {\n const canvas = document.getElementById('barcode-container');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n previewEl.textContent = '\u26a0\ufe0f \u4e00\u7dad\u689d\u78bc\u4e0d\u652f\u63f4\u6b64\u5167\u5bb9 (\u5efa\u8b70\u4f7f\u7528\u7d14\u82f1\u6578)';\n previewEl.classList.remove('text-slate-800');\n previewEl.classList.add('text-red-500');\n }\n } else if (currentMode === 'ean') {\n \/\/ \u751f\u6210 EAN \u689d\u78bc\n try {\n \/\/ \u81ea\u52d5\u5224\u65b7\u4f7f\u7528 EAN13 \u6216 EAN8\n let eanFormat = \"EAN13\";\n if (fullText.length === 7 || fullText.length === 8) {\n eanFormat = \"EAN8\";\n }\n \n JsBarcode(\"#ean-container\", fullText, {\n format: eanFormat,\n lineColor: \"#000000\", \/\/ \u9ed1\u8272\n width: 2,\n height: 100,\n displayValue: true,\n margin: 10\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } catch (error) {\n const canvas = document.getElementById('ean-container');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n previewEl.textContent = '\u26a0\ufe0f EAN \u683c\u5f0f\u932f\u8aa4 (\u901a\u5e38\u9700\u70ba 8\u300112 \u6216 13 \u4f4d\u7d14\u6578\u5b57)';\n previewEl.classList.remove('text-slate-800');\n previewEl.classList.add('text-red-500');\n }\n } else if (currentMode === 'datamatrix') {\n \/\/ \u751f\u6210 DataMatrix\n try {\n bwipjs.toCanvas('datamatrix-container', {\n bcid: 'datamatrix', \/\/ \u6307\u5b9a\u689d\u78bc\u683c\u5f0f\u70ba DataMatrix\n text: fullText, \/\/ \u8981\u8f49\u63db\u7684\u6587\u5b57\n scale: 5, \/\/ \u7e2e\u653e\u6bd4\u4f8b\n padding: 2, \/\/ \u908a\u8ddd\n backgroundcolor: 'ffffff', \/\/ \u80cc\u666f\u586b\u767d\n barcolor: '000000' \/\/ \u6539\u56de\u9ed1\u8272\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } catch (error) {\n const canvas = document.getElementById('datamatrix-container');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n previewEl.textContent = '\u26a0\ufe0f DataMatrix \u7522\u751f\u5931\u6557';\n previewEl.classList.remove('text-slate-800');\n previewEl.classList.add('text-red-500');\n }\n }\n }\n\n \/\/ \u526a\u8cbc\u7c3f\u8f14\u52a9\u529f\u80fd\n async function pasteFromClipboard() {\n try {\n const text = await navigator.clipboard.readText();\n if (text) {\n document.getElementById('qr-input').value = text;\n generateCode();\n }\n } catch (err) {\n \/\/ \u5982\u679c\u700f\u89bd\u5668\u963b\u64cb\u81ea\u52d5\u8b80\u53d6\u526a\u8cbc\u7c3f\uff0c\u5c07\u6e38\u6a19\u8f49\u79fb\u81f3\u8f38\u5165\u6846\u8b93\u4f7f\u7528\u8005\u624b\u52d5\u8cbc\u4e0a\n const inputEl = document.getElementById('qr-input');\n inputEl.focus();\n inputEl.placeholder = \"\u8acb\u6309 Ctrl+V \u6216 Cmd+V \u624b\u52d5\u8cbc\u4e0a\";\n }\n }\n\n \/\/ \u4e0b\u8f09\u689d\u78bc\u5716\u7247\u529f\u80fd\n function downloadCode() {\n let imageUrl = '';\n \n if (currentMode === 'qr') {\n const container = document.getElementById('qr-container');\n const canvas = container.querySelector('canvas');\n const img = container.querySelector('img');\n \n if (img && img.src && img.src.includes('data:image')) {\n imageUrl = img.src;\n } else if (canvas) {\n imageUrl = canvas.toDataURL(\"image\/png\");\n }\n } else {\n \/\/ \u81ea\u52d5\u5957\u7528 barcode-container, ean-container \u6216 datamatrix-container\n const canvas = document.getElementById(`${currentMode}-container`);\n \/\/ \u6aa2\u67e5\u756b\u5e03\u662f\u5426\u6709\u5be6\u969b\u5167\u5bb9 (\u6709\u5bec\u5ea6)\n if (canvas.width > 0) {\n imageUrl = canvas.toDataURL(\"image\/png\");\n }\n }\n\n if (imageUrl && imageUrl !== 'data:,') {\n const link = document.createElement('a');\n link.href = imageUrl;\n const prefix = currentMode === 'qr' ? 'qrcode' : currentMode;\n const timestamp = new Date().getTime();\n link.download = `${prefix}_${timestamp}.png`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n } else {\n alert('\u689d\u78bc\u5c1a\u672a\u7522\u751f\u6216\u4e0d\u652f\u63f4\u8a72\u5167\u5bb9\uff0c\u7121\u6cd5\u4e0b\u8f09\u3002');\n }\n }\n\n \/\/ \u7d81\u5b9a\u8f38\u5165\u4e8b\u4ef6\uff1a\u7576\u8f38\u5165\u6846\u5167\u5bb9\u6539\u8b8a\u6642\u5373\u6642\u66f4\u65b0\n const inputEl = document.getElementById('qr-input');\n inputEl.addEventListener('input', generateCode);\n inputEl.addEventListener('paste', () => {\n setTimeout(generateCode, 50); \/\/ \u78ba\u4fdd\u8cbc\u4e0a\u52d5\u4f5c\u5b8c\u6210\u5f8c\u518d\u53d6\u503c\n });\n\n \/\/ \u9801\u9762\u8f09\u5165\u6642\u81ea\u52d5\u57f7\u884c\u4e00\u6b21\n window.onload = generateCode;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>QRCODE \u7522\u751f\u5668 \u689d\u78bc\u7522\u751f\u5668 QR Code \u4e00\u7dad\u689d\u78bc EAN DataMatrix \u6e96\u5099\u751f\u6210&#8230 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2292","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2292"}],"version-history":[{"count":17,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292\/revisions"}],"predecessor-version":[{"id":2317,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292\/revisions\/2317"}],"wp:attachment":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2292,"date":"2026-03-23T01:33:29","date_gmt":"2026-03-23T01:33:29","guid":{"rendered":"https:\/\/www.label.tw\/tw\/?page_id=2292"},"modified":"2026-03-23T03:49:31","modified_gmt":"2026-03-23T03:49:31","slug":"%e5%b0%8f%e5%b7%a5%e5%85%b7","status":"publish","type":"page","link":"https:\/\/www.label.tw\/tw\/?page_id=2292","title":{"rendered":"\u689d\u78bc\u7522\u751f\u5668"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n QRCODE \u7522\u751f\u5668<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.0\/dist\/JsBarcode.all.min.js\"><\/script>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bwip-js\/3.3.0\/bwip-js-min.js\"><\/script>\n <style>\n \/* \u7a0d\u5fae\u7f8e\u5316\u5377\u8ef8\u8207\u904e\u6e21\u6548\u679c *\/\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }\n input, select, button { transition: all 0.2s ease; }\n input:focus, select:focus { \n outline: none; \n border-color: #0061b7; \n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); \n }\n \/* \u78ba\u4fdd\u7522\u751f\u7684\u5716\u7247\u7f6e\u4e2d *\/\n #qr-container img {\n margin: auto;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-100 min-h-screen flex items-center justify-center p-4 md:p-8\">\n\n \n <div class=\"bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden border border-slate-100\">\n \n \n <div class=\"bg-[#0061b7] p-5 text-center flex justify-between items-center px-8\">\n <h1 class=\"text-2xl font-bold text-white tracking-wider mx-auto\">\u689d\u78bc\u7522\u751f\u5668<\/h1>\n <\/div>\n\n <div class=\"p-6 md:p-8 flex flex-col gap-6\">\n \n \n <div class=\"flex bg-white p-1 rounded-lg w-full max-w-full mx-auto shadow-sm border border-[#0061b7] gap-1 overflow-x-auto\">\n <button id=\"btn-qr\" onclick=\"switchMode('qr')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-[#0061b7] !text-white !border-none shadow-sm transition-all whitespace-nowrap\">QR Code<\/button>\n <button id=\"btn-barcode\" onclick=\"switchMode('barcode')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\">\u4e00\u7dad\u689d\u78bc<\/button>\n <button id=\"btn-ean\" onclick=\"switchMode('ean')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\">EAN<\/button>\n <button id=\"btn-datamatrix\" onclick=\"switchMode('datamatrix')\" class=\"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\">DataMatrix<\/button>\n <\/div>\n\n \n <div class=\"flex flex-col items-center justify-center bg-slate-50 rounded-xl p-6 border-2 border-dashed border-slate-300 min-h-[300px] relative\">\n <div id=\"qr-container\" class=\"bg-white p-4 rounded-xl shadow-sm min-w-[250px] min-h-[250px] flex items-center justify-center\">\n \n <\/div>\n \n <canvas id=\"barcode-container\" class=\"hidden bg-white p-4 rounded-xl shadow-sm max-w-full\"><\/canvas>\n \n <canvas id=\"ean-container\" class=\"hidden bg-white p-4 rounded-xl shadow-sm max-w-full\"><\/canvas>\n \n <canvas id=\"datamatrix-container\" class=\"hidden bg-white p-4 rounded-xl shadow-sm max-w-full\"><\/canvas>\n\n \n <div class=\"mt-5 flex flex-col sm:flex-row items-center gap-3 w-full max-w-lg\">\n \n <div class=\"flex-1 text-center text-sm font-mono text-slate-800 bg-slate-200\/50 px-4 py-2.5 rounded-lg w-full break-all\" id=\"url-preview\" title=\"\u6e96\u5099\u751f\u6210...\">\n \u6e96\u5099\u751f\u6210…\n <\/div>\n <button id=\"downloadBtn\" onclick=\"downloadCode()\" class=\"w-full sm:w-auto flex-shrink-0 h-10 px-6 !bg-[#0061b7] hover:!bg-[#004c8f] !text-white font-medium rounded-lg flex items-center justify-center gap-2 active:scale-95 transition-transform shadow-md !border-none\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n <\/svg>\n \u4e0b\u8f09\u5716\u7247\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col gap-3\">\n <label class=\"block text-sm font-bold text-slate-700\">\u8acb\u8cbc\u4e0a\u7db2\u5740\u6216\u6587\u5b57\uff1a<\/label>\n <div class=\"relative\">\n <textarea id=\"qr-input\" rows=\"3\" placeholder=\"\u5728\u6b64\u8cbc\u4e0a\u60a8\u8907\u88fd\u7684\u7db2\u5740\u6216\u6587\u5b57\" class=\"w-full p-4 bg-white border border-slate-300 rounded-xl text-slate-700 placeholder-slate-400 focus:ring-2 focus:ring-[#0061b7] focus:border-[#0061b7] transition-all resize-none shadow-sm\"><\/textarea>\n \n <button onclick=\"pasteFromClipboard()\" class=\"absolute bottom-3 right-3 !bg-[#0061b7] hover:!bg-[#004c8f] !text-white px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1 shadow-sm !border-none\" title=\"\u4e00\u9375\u8cbc\u4e0a\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/>\n <\/svg>\n \u8cbc\u4e0a\n <\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u521d\u59cb\u5316\u8b8a\u6578\n let qrcode = null;\n let currentMode = 'qr'; \/\/ \u9810\u8a2d\u70ba QR Code \u6a21\u5f0f\n\n \/\/ \u5207\u63db\u6a21\u5f0f\u51fd\u6578\n function switchMode(mode) {\n currentMode = mode;\n const modes = ['qr', 'barcode', 'ean', 'datamatrix'];\n \n modes.forEach(m => {\n const btn = document.getElementById(`btn-${m}`);\n const container = document.getElementById(`${m}-container`);\n \n if (m === mode) {\n \/\/ \u9078\u53d6\u72c0\u614b\uff1a\u85cd\u5e95\u767d\u5b57\uff0c\u5f37\u5236\u53d6\u6d88\u5916\u90e8\u908a\u6846\u5f71\u97ff\uff0c\u653e\u5927\u5b57\u9ad4\n btn.className = \"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-[#0061b7] !text-white !border-none shadow-sm transition-all whitespace-nowrap\";\n if (m === 'qr') {\n container.classList.remove('hidden');\n container.classList.add('flex');\n } else {\n container.classList.remove('hidden');\n }\n } else {\n \/\/ \u672a\u9078\u53d6\u72c0\u614b\uff1a\u767d\u5e95\u85cd\u5b57\uff0c\u5f37\u5236\u53d6\u6d88\u5916\u90e8\u908a\u6846\u5f71\u97ff\uff0c\u653e\u5927\u5b57\u9ad4\n btn.className = \"flex-1 py-3 px-4 text-2xl font-bold rounded-md !bg-white !text-[#0061b7] !border-none hover:!bg-blue-50 transition-all whitespace-nowrap\";\n container.classList.add('hidden');\n if (m === 'qr') container.classList.remove('flex');\n }\n });\n generateCode(); \/\/ \u5207\u63db\u6642\u91cd\u65b0\u751f\u6210\n }\n\n function generateCode() {\n \/\/ \u76f4\u63a5\u53d6\u5f97\u55ae\u4e00\u8f38\u5165\u6846\u7684\u503c\uff0c\u4e26\u5229\u7528 trim() \u53bb\u9664\u524d\u5f8c\u4e0d\u5fc5\u8981\u7684\u7a7a\u767d\n const fullText = document.getElementById('qr-input').value.trim();\n\n \/\/ \u66f4\u65b0\u756b\u9762\u4e0a\u7684\u6587\u5b57\u9810\u89bd\n const previewEl = document.getElementById('url-preview');\n previewEl.textContent = fullText ? fullText : '\u8acb\u8f38\u5165\u6216\u8cbc\u4e0a\u5167\u5bb9...';\n previewEl.title = fullText;\n\n \/\/ \u5982\u679c\u6c92\u6709\u5167\u5bb9\uff0c\u6e05\u7a7a\u756b\u9762\n if (fullText.length === 0) {\n document.getElementById('qr-container').innerHTML = '';\n \n ['barcode-container', 'ean-container', 'datamatrix-container'].forEach(id => {\n const canvas = document.getElementById(id);\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n });\n \n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n return;\n }\n\n if (currentMode === 'qr') {\n \/\/ \u6e05\u7a7a\u4e26\u751f\u6210 QR Code\n const container = document.getElementById('qr-container');\n container.innerHTML = '';\n qrcode = new QRCode(container, {\n text: fullText,\n width: 220, \n height: 220,\n colorDark : \"#000000\", \/\/ \u6539\u56de\u9ed1\u8272\n colorLight : \"#ffffff\",\n correctLevel : QRCode.CorrectLevel.M\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } else if (currentMode === 'barcode') {\n \/\/ \u751f\u6210\u4e00\u7dad\u689d\u78bc (Code128)\n try {\n JsBarcode(\"#barcode-container\", fullText, {\n format: \"CODE128\",\n lineColor: \"#000000\", \/\/ \u6539\u56de\u9ed1\u8272\n width: 2,\n height: 100,\n displayValue: true,\n margin: 10\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } catch (error) {\n const canvas = document.getElementById('barcode-container');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n previewEl.textContent = '\u26a0\ufe0f \u4e00\u7dad\u689d\u78bc\u4e0d\u652f\u63f4\u6b64\u5167\u5bb9 (\u5efa\u8b70\u4f7f\u7528\u7d14\u82f1\u6578)';\n previewEl.classList.remove('text-slate-800');\n previewEl.classList.add('text-red-500');\n }\n } else if (currentMode === 'ean') {\n \/\/ \u751f\u6210 EAN \u689d\u78bc\n try {\n \/\/ \u81ea\u52d5\u5224\u65b7\u4f7f\u7528 EAN13 \u6216 EAN8\n let eanFormat = \"EAN13\";\n if (fullText.length === 7 || fullText.length === 8) {\n eanFormat = \"EAN8\";\n }\n \n JsBarcode(\"#ean-container\", fullText, {\n format: eanFormat,\n lineColor: \"#000000\", \/\/ \u9ed1\u8272\n width: 2,\n height: 100,\n displayValue: true,\n margin: 10\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } catch (error) {\n const canvas = document.getElementById('ean-container');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n previewEl.textContent = '\u26a0\ufe0f EAN \u683c\u5f0f\u932f\u8aa4 (\u901a\u5e38\u9700\u70ba 8\u300112 \u6216 13 \u4f4d\u7d14\u6578\u5b57)';\n previewEl.classList.remove('text-slate-800');\n previewEl.classList.add('text-red-500');\n }\n } else if (currentMode === 'datamatrix') {\n \/\/ \u751f\u6210 DataMatrix\n try {\n bwipjs.toCanvas('datamatrix-container', {\n bcid: 'datamatrix', \/\/ \u6307\u5b9a\u689d\u78bc\u683c\u5f0f\u70ba DataMatrix\n text: fullText, \/\/ \u8981\u8f49\u63db\u7684\u6587\u5b57\n scale: 5, \/\/ \u7e2e\u653e\u6bd4\u4f8b\n padding: 2, \/\/ \u908a\u8ddd\n backgroundcolor: 'ffffff', \/\/ \u80cc\u666f\u586b\u767d\n barcolor: '000000' \/\/ \u6539\u56de\u9ed1\u8272\n });\n previewEl.classList.remove('text-red-500');\n previewEl.classList.add('text-slate-800');\n } catch (error) {\n const canvas = document.getElementById('datamatrix-container');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n previewEl.textContent = '\u26a0\ufe0f DataMatrix \u7522\u751f\u5931\u6557';\n previewEl.classList.remove('text-slate-800');\n previewEl.classList.add('text-red-500');\n }\n }\n }\n\n \/\/ \u526a\u8cbc\u7c3f\u8f14\u52a9\u529f\u80fd\n async function pasteFromClipboard() {\n try {\n const text = await navigator.clipboard.readText();\n if (text) {\n document.getElementById('qr-input').value = text;\n generateCode();\n }\n } catch (err) {\n \/\/ \u5982\u679c\u700f\u89bd\u5668\u963b\u64cb\u81ea\u52d5\u8b80\u53d6\u526a\u8cbc\u7c3f\uff0c\u5c07\u6e38\u6a19\u8f49\u79fb\u81f3\u8f38\u5165\u6846\u8b93\u4f7f\u7528\u8005\u624b\u52d5\u8cbc\u4e0a\n const inputEl = document.getElementById('qr-input');\n inputEl.focus();\n inputEl.placeholder = \"\u8acb\u6309 Ctrl+V \u6216 Cmd+V \u624b\u52d5\u8cbc\u4e0a\";\n }\n }\n\n \/\/ \u4e0b\u8f09\u689d\u78bc\u5716\u7247\u529f\u80fd\n function downloadCode() {\n let imageUrl = '';\n \n if (currentMode === 'qr') {\n const container = document.getElementById('qr-container');\n const canvas = container.querySelector('canvas');\n const img = container.querySelector('img');\n \n if (img && img.src && img.src.includes('data:image')) {\n imageUrl = img.src;\n } else if (canvas) {\n imageUrl = canvas.toDataURL(\"image\/png\");\n }\n } else {\n \/\/ \u81ea\u52d5\u5957\u7528 barcode-container, ean-container \u6216 datamatrix-container\n const canvas = document.getElementById(`${currentMode}-container`);\n \/\/ \u6aa2\u67e5\u756b\u5e03\u662f\u5426\u6709\u5be6\u969b\u5167\u5bb9 (\u6709\u5bec\u5ea6)\n if (canvas.width > 0) {\n imageUrl = canvas.toDataURL(\"image\/png\");\n }\n }\n\n if (imageUrl && imageUrl !== 'data:,') {\n const link = document.createElement('a');\n link.href = imageUrl;\n const prefix = currentMode === 'qr' ? 'qrcode' : currentMode;\n const timestamp = new Date().getTime();\n link.download = `${prefix}_${timestamp}.png`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n } else {\n alert('\u689d\u78bc\u5c1a\u672a\u7522\u751f\u6216\u4e0d\u652f\u63f4\u8a72\u5167\u5bb9\uff0c\u7121\u6cd5\u4e0b\u8f09\u3002');\n }\n }\n\n \/\/ \u7d81\u5b9a\u8f38\u5165\u4e8b\u4ef6\uff1a\u7576\u8f38\u5165\u6846\u5167\u5bb9\u6539\u8b8a\u6642\u5373\u6642\u66f4\u65b0\n const inputEl = document.getElementById('qr-input');\n inputEl.addEventListener('input', generateCode);\n inputEl.addEventListener('paste', () => {\n setTimeout(generateCode, 50); \/\/ \u78ba\u4fdd\u8cbc\u4e0a\u52d5\u4f5c\u5b8c\u6210\u5f8c\u518d\u53d6\u503c\n });\n\n \/\/ \u9801\u9762\u8f09\u5165\u6642\u81ea\u52d5\u57f7\u884c\u4e00\u6b21\n window.onload = generateCode;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>QRCODE \u7522\u751f\u5668 \u689d\u78bc\u7522\u751f\u5668 QR Code \u4e00\u7dad\u689d\u78bc EAN DataMatrix \u6e96\u5099\u751f\u6210&#8230 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2292","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2292"}],"version-history":[{"count":17,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292\/revisions"}],"predecessor-version":[{"id":2317,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292\/revisions\/2317"}],"wp:attachment":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}