電子發票元件
電子發票顯示元件，含賣方/買方資訊、品項列表、金額合計、QR Code。
Display component for Taiwan e-invoices with seller/buyer info, item list, totals, and optional QR code.
CLI
npx taiwan-ui add egui-invoicenpm package
npm install @taiwan-ui/react電子發票證明聯
AB-12345678
114/03/15
| 品項 | 數量 | 單價 | 小計 |
|---|---|---|---|
| 雲端服務月費 | 1 | $2,400 | $2,400 |
| 資料備份方案 | 2 | $300 | $600 |
| 技術支援 | 1 | $500 | $500 |
此為電子發票證明聯，與實體發票具同等效力
| Prop | Type | Default |
|---|---|---|
invoiceNumber* | string | — |
date* | string | — |
sellerName* | string | — |
sellerTaxId | string | — |
buyerTaxId | string | — |
items* | InvoiceItem[] | — |
totalAmount* | number | — |
qrCodeUrl | string | — |
compact | boolean | false |
發票號碼
發票日期
賣方名稱
賣方統編
買方統編
合計金額
QR Code 圖片網址
隱藏品項明細
import eGUIInvoice from "@/components/taiwan/eGUIInvoice";
export default function Example() {
return (
<eGUIInvoice />
);
}
import eGUIInvoice from "@/components/taiwan/eGUIInvoice";
export default function MyPage() {
return (
<eGUIInvoice
invoiceNumber="AB12345678"
date="114/03/15"
sellerName="台灣科技股份有限公司"
items={[
{ name: "商品 A", quantity: 2, unitPrice: 150 },
{ name: "商品 B", quantity: 1, unitPrice: 300 },
]}
totalAmount={600}
/>
);
}