Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

IBaiduOcr

Character recognition

Tips

本组件通过调用 Baidu AI 平台文字识别接口进行增值税发票文字识别。支持对增值税普票、专票、全电发票（新版全国统一电子发票，专票/普票）、卷票、区块链发票的所有字段进行结构化识别，包括发票基本信息、销售方及购买方信息、商品信息、价税信息等，其中五要素字段的识别准确率超过 99.9%；同时，支持对增值税卷票的 21 个关键字段进行识别，包括发票类型、发票代码、发票号码、机打号码、机器编号、收款人、销售方名称、销售方纳税人识别号、开票日期、购买方名称、购买方纳税人识别号、项目、单价、数量、金额、税额、合计金额(小写)、合计金额(大写)、校验码、省、市，四要素字段的识别准确率可达95%。上传图片不能超过 4M

Precautions

This component relies on BootstrapBlazor.BaiduOcr, which needs to reference its component package when using this component

Nuget Install

Use nuget.org to install BootstrapBlazor.BaiduOcr component

.NET CLI

dotnet add package BootstrapBlazor.BaiduOcr

PackageReference

<PackageReference Include="BootstrapBlazor.BaiduOcr" Version="7.1.1" />

Package Manager

Install-Package BootstrapBlazor.BaiduOcr

Usage

1. Get IBaiduOcr instance by inject service

2. Call IBaiduOcr instance method

VAT Invoice

Call Baidu Ocr interface for text recognition by uploading VAT invoice image

Demo

@inject IBaiduOcr OcrService
@inject ToastService ToastService
@implements IDisposable

<ButtonUpload TValue="string" OnChange="@OnClickToUploadBlock" BrowserButtonText="VATInvoice" ShowUploadFileList="false" IsDisabled="IsLoading" BrowserButtonIcon="@Icon"></ButtonUpload>

@if (Invoice != null)
{
    <div class="row form-inline g-3 mt-0">
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="发票代码" @bind-Value="Invoice.InvoiceCode"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="发票号码" Value="Invoice.InvoiceNum"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="发票类型" @bind-Value="Invoice.ServiceType"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="联次信息" Value="Invoice.SheetNum"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="发票种类" @bind-Value="Invoice.InvoiceType"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="发票名称" Value="Invoice.InvoiceTypeOrg"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="发票标志" @bind-Value="Invoice.InvoiceTag"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="开票日期" Value="Invoice.InvoiceDate"></Display>
        </div>
        <div class="col-12">
            <Display ShowLabel="true" DisplayText="校验码" Value="Invoice.CheckCode"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="购方名称" @bind-Value="Invoice.PurchaserName"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="纳税人识别号" Value="Invoice.PurchaserRegisterNum"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="开户行及账号" @bind-Value="Invoice.PurchaserBank"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="购方地址" Value="Invoice.PurchaserAddress"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="销售方名称" @bind-Value="Invoice.SellerName"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="纳税人识别号" Value="Invoice.SellerRegisterNum"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="销售方及账号" @bind-Value="Invoice.SellerBank"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="销售方地址" Value="Invoice.SellerAddress"></Display>
        </div>
        <div class="col-12">
            <Display ShowLabel="true" DisplayText="备注" @bind-Value="Invoice.Remarks"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="价税合计" Value="Invoice.AmountInFiguers"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="合计金额" Value="Invoice.TotalAmount"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <Display ShowLabel="true" DisplayText="合计税额" @bind-Value="Invoice.TotalTax"></Display>
        </div>
        <div class="col-12 col-sm-6">
        </div>
        @if (Invoice.CommodityName?.Any() ?? false)
        {
            <div class="col-12 col-sm-6">
                <Display ShowLabel="true" DisplayText="项目名称" Value="Invoice.CommodityName.First().CommodityName"></Display>
            </div>
        }
        @if (Invoice.CommodityTaxRate?.Any() ?? false)
        {
            <div class="col-12 col-sm-6">
                <Display ShowLabel="true" DisplayText="税率" Value="Invoice.CommodityTaxRate.First().CommodityTaxRate"></Display>
            </div>
        }
    </div>
}

@code {
    private InvoiceEntity? Invoice { get; set; }

    private async Task OnClickToUpload(UploadFile file)
    {
        if (file.File != null)
        {
            var payload = await file.GetBytesAsync(file.File.Size);
            if (payload?.Any() ?? false)
            {
                var result = await OcrService.CheckVatInvoiceAsync(payload);
                Invoice = result.Entity;
                if (result.Entity != null)
                {
                    await ToastService.Success("Vat Invoice", "VAT Invoice success!");
                    StateHasChanged();
                }
                else
                {
                    await ToastService.Information("Vat Invoice", $"{result.ErrorCode}: {result.ErrorMessage}");
                }
            }
        }
    }

    /*以下示例为本站特殊处理逻辑可不参考*/
    private bool IsLoading { get; set; }

    private string ButtonIcon { get; } = "fa-solid fa-cloud-arrow-up";

    private string LoadingIcon { get; } = "fa-solid fa-spinner fa-spin-pulse";

    private string Icon => IsLoading ? LoadingIcon : ButtonIcon;

    /// <summary>
    /// 取消请求令牌
    /// </summary>
    private CancellationTokenSource? TokenSource { get; set; }

    private async Task OnClickToUploadBlock(UploadFile file)
    {
        if (file.File != null)
        {
            // 设置 按钮禁用
            IsLoading = true;
            StateHasChanged();

            // 获得上传文件
            var payload = await file.GetBytesAsync(file.File.Size);
            if (payload?.Any() ?? false)
            {
                try
                {
                    TokenSource ??= new();
                    var result = await OcrService.CheckVatInvoiceAsync(payload, TokenSource.Token);
                    Invoice = result.Entity;
                    if (result.Entity != null)
                    {
                        await ToastService.Success("Vat Invoice", "VAT Invoice success!");
                    }
                    else
                    {
                        await ToastService.Information("Vat Invoice", $"{result.ErrorCode}: {result.ErrorMessage}");
                    }
                }
                catch (TaskCanceledException)
                {

                }
            }

            IsLoading = false;
            StateHasChanged();
        }
    }

    /// <summary>
    /// 关闭网页时调用
    /// </summary>
    /// <param name="disposing"></param>
    /// <returns></returns>
    protected virtual void Dispose(bool disposing)
    {
        if (disposing && TokenSource != null)
        {
            TokenSource.Cancel();
            TokenSource.Dispose();
        }
    }

    /// <summary>
    /// 关闭网页时调用
    /// </summary>
    /// <returns></returns>
    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }
}

增值税验真

通过调用 IBaiduOcr 服务实例的发票验真方法 VerifyInvoiceAsync 返回 InvoiceVerifyResult 其属性 Valid 为 true 时为真

Demo

发票种类

增值税专用发票：special_vat_invoice

增值税电子专用发票：elec_special_vat_invoice

增值税普通发票：normal_invoice

增值税普通发票（电子）：elec_normal_invoice

增值税普通发票（卷式）：roll_normal_invoice

通行费增值税电子普通发票：toll_elec_normal_invoice

区块链电子发票（目前仅支持深圳地区）：blockchain_invoice

全电发票（专用发票）：elec_invoice_special

全电发票（普通发票）：elec_invoice_normal

货运运输业增值税专用发票：special_freight_transport_invoice

机动车销售发票：motor_vehicle_invoice

二手车销售发票：used_vehicle_invoice

@inject IBaiduOcr OcrService
@inject ToastService ToastService
@implements IDisposable

<ValidateForm Model="Model" OnValidSubmit="@Verify">
    <EditorForm TModel="InvoiceForm" RowType="RowType.Inline" AutoGenerateAllItem="false">
        <FieldItems>
            <EditorItem @bind-Field="@context.InvoiceType" Text="发票种类" />
            <EditorItem @bind-Field="@context.InvoiceCode" Text="发票代码" />
            <EditorItem @bind-Field="@context.InvoiceNum" Text="发票号码" />
            <EditorItem @bind-Field="@context.InvoiceDate" Text="开票日期" PlaceHolder="YYYYMMDD" />
            <EditorItem @bind-Field="@context.CheckCode" Text="校验码" PlaceHolder="后六位" />
            <EditorItem @bind-Field="@context.TotalAmount" Text="金额" PlaceHolder="可为空" />
        </FieldItems>
        <Buttons>
            <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-check" Text="Verify" />
        </Buttons>
    </EditorForm>
</ValidateForm>

@code {
    private CancellationTokenSource? TokenSource { get; set; }

    private InvoiceForm Model { get; set; } = new() { InvoiceType = "elec_special_vat_invoice", TotalAmount = "0" };

    private async Task Verify(EditContext context)
    {
        var result = await OcrService.VerifyInvoiceAsync(Model.InvoiceCode, Model.InvoiceNum, Model.InvoiceDate, Model.InvoiceType, Model.CheckCode, Model.TotalAmount);
        if (result.ErrorCode != 0)
        {
            await ToastService.Information("Verify Vat", $"{result.ErrorCode}: {result.ErrorMessage}");
        }
        else if (result.Entity != null)
        {
            await ToastService.Success("Verify Vat", result.Entity?.VerifyMessage);
        }
    }

    /// <summary>
    /// 关闭网页时调用
    /// </summary>
    /// <param name="disposing"></param>
    /// <returns></returns>
    protected virtual void Dispose(bool disposing)
    {
        if (disposing && TokenSource != null)
        {
            TokenSource.Cancel();
            TokenSource.Dispose();
        }
    }

    /// <summary>
    /// 关闭网页时调用
    /// </summary>
    /// <returns></returns>
    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }

    private class InvoiceForm
    {
        [Required(ErrorMessage = "发票代码不能为空")]
        [NotNull]
        public string? InvoiceCode { get; set; }

        [Required(ErrorMessage = "发票号码不能为空")]
        [NotNull]
        public string? InvoiceNum { get; set; }

        [Required(ErrorMessage = "开票日期不能为空")]
        [NotNull]
        public string? InvoiceDate { get; set; }

        [NotNull]
        public string? InvoiceType { get; set; }

        [Required(ErrorMessage = "校验码不能为空")]
        [NotNull]
        public string? CheckCode { get; set; }

        [NotNull]
        public string? TotalAmount { get; set; }
    }
}

@page "/ocr"
@inject IStringLocalizer<BaiduOcr> Localizer

<h3>IBaiduOcr</h3>

<h4>Character recognition</h4>

<Tips class="mt-3">本组件通过调用 Baidu AI 平台文字识别接口进行增值税发票文字识别。支持对增值税普票、专票、全电发票（新版全国统一电子发票，专票/普票）、卷票、区块链发票的所有字段进行结构化识别，包括发票基本信息、销售方及购买方信息、商品信息、价税信息等，其中五要素字段的识别准确率超过 99.9%； 同时，支持对增值税卷票的 21 个关键字段进行识别，包括发票类型、发票代码、发票号码、机打号码、机器编号、收款人、销售方名称、销售方纳税人识别号、开票日期、购买方名称、购买方纳税人识别号、项目、单价、数量、金额、税额、合计金额(小写)、合计金额(大写)、校验码、省、市，四要素字段的识别准确率可达95%。上传图片不能超过 4M</Tips>

<PackageTips Name="BootstrapBlazor.BaiduOcr" />

<div class="mb-2"><b>Usage</b></div>

<div>1. Get <code>IBaiduOcr</code> instance by inject service</div>
<div>2. Call <code>IBaiduOcr</code> instance method</div>

<DemoBlock Title="VAT Invoice" Introduction="Call Baidu Ocr interface for text recognition by uploading VAT invoice image" Name="VatInvoice" Demo="typeof(Demos.BaiduOcr.BaiduOcrNormal)" />

<DemoBlock Title="增值税验真" Introduction="通过调用 <code>IBaiduOcr</code> 服务实例的发票验真方法 <code>VerifyInvoiceAsync</code> 返回 <code>InvoiceVerifyResult</code> 其属性 <code>Valid</code> 为 <code>true</code> 时为真" Name="Verify" Demo="typeof(Demos.BaiduOcr.BaiduOcrVerifyVatInvoice)">
    <h4 class="mb-2">发票种类</h4>
    <div>增值税专用发票：special_vat_invoice</div>
    <div>增值税电子专用发票：elec_special_vat_invoice</div>
    <div>增值税普通发票：normal_invoice</div>
    <div>增值税普通发票（电子）：elec_normal_invoice</div>
    <div>增值税普通发票（卷式）：roll_normal_invoice</div>
    <div>通行费增值税电子普通发票：toll_elec_normal_invoice</div>
    <div>区块链电子发票（目前仅支持深圳地区）：blockchain_invoice</div>
    <div>全电发票（专用发票）：elec_invoice_special</div>
    <div>全电发票（普通发票）：elec_invoice_normal</div>
    <div>货运运输业增值税专用发票：special_freight_transport_invoice</div>
    <div>机动车销售发票：motor_vehicle_invoice</div>
    <div class="mb-3">二手车销售发票：used_vehicle_invoice</div>
</DemoBlock>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 百度文字识别示例
/// </summary>
public partial class BaiduOcr
{
}

IBaiduOcr

Character recognition

Tips

Demo

Demo

发票种类

Bootstrap Blazor Component library updated to 7.2.5-beta02