# Visionkit-SampleCode-SheetExtractionDemo-ArkTS

**Repository Path**: harmonyos_samples/visionkit-samplecode-sheet-extraction-demo-arkts

## Basic Information

- **Project Name**: Visionkit-SampleCode-SheetExtractionDemo-ArkTS
- **Description**: 本示例通过提供拍摄表格并转换为表格文档的服务。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 4
- **Created**: 2025-04-24
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Implementing Sheet Extraction function

## Overview

This sample code illustrates how to use the sheet extraction capability among the visual AI capabilities.

It simulates how to redirect to the sheet extraction function, obtain the sheet extraction result, and display the result.

Requires document scanning control **@hms.ai.DocumentScanner.d.ets**.



## Preview

| Preview                        | Photo taking                    | Sheet extraction                        |
| ---------------------------- |---------------------------------|-----------------------------------------|
| ![](screenshots/preview_en.png) | ![](screenshots/capture_en.png) | ![](screenshots/sheetExtraction_en.png) |



Instructions:

1. On the home screen of a mobile phone, tap **SheetDemo** to start the app.
2. Click 'SheetExtraction' to go to the document scanning control.
3. Align the lens with a table and pop up the sheet extraction bubble. (Make sure that is a table. Otherwise, the entry cannot be displayed.)
4. Click the "Extract spreadsheet" bubble to enter the sheet extraction and shooting page.
5. Click to shoot the identification table.



## Project Directory

```
├─entry/src/main/ets                         // Code area 
│  ├─entryability
│  │  └─EntryAbility.ets                     // Entry ability
│  └─pages
│     └─Index.ets                            // Main page for app
│     └─SheetExtractionPage.ets              // Main page for document scanning
└─entry/src/main/resources                   // App resource directory
```



## How to Implement

The functionality shown in this example is provided by the document scanning control defined in **@hms.ai.DocumentScanner.d.ets**.
```ts
/**
 * This is a ui component used for generating document scans.
 * @struct { DocumentScanner }
 * @syscap SystemCapability.AI.Component.DocScan
 * @atomicservice
 * @since 5.0.0(12)
 */
@Component
declare struct DocumentScanner {
    /**
     * config for document scanner.
     *
     * @type { DocumentScannerConfig }
     * @syscap SystemCapability.AI.Component.DocScan
     * @atomicservice
     * @since 5.0.0(12)
     */
    scannerConfig: DocumentScannerConfig;
    /**
     * @type { DocumentScannerResultCallback }
     * callback of the listened event, called when the Component is terminated.
     * @syscap SystemCapability.AI.Component.DocScan
     * @atomicservice
     * @since 5.0.0(12)
     */
    onResult: DocumentScannerResultCallback;
    /**
     * Constructor used to create a <b>DocumentScanner</b> object.
     * @syscap SystemCapability.AI.Component.DocScan
     * @atomicservice
     * @since 5.0.0(12)
     */
    build(): void;
}
```

Before using the service, you need to import **DocumentScanner**.
Call the document scanning API and receive the processing result.



## Required Permissions

N/A



## Dependencies

N/A



## Constraints

1. The sample app is only supported on Huawei phones and tablets with standard systems.
2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later.
3. The DevEco Studio version must be DevEco Studio 6.0.0 Release or later.
4. The HarmonyOS SDK version must be HarmonyOS 6.0.0 Release or later.