【HarmonyOS 5】鴻蒙應用實現發票掃描、文檔掃描輸出PDF圖片或者表格的功能

##鴻蒙開發能力 ##HarmonyOS SDK應用服務##鴻蒙金融類應用 （金融理財#

一、前言

圖（1-1）

HarmonyOS 的 ** 文檔掃描控件（DocumentScanner）** 是 AI Vision Kit 提供的核心場景化視覺服務，旨在幫助開發者快速實現移動端文檔數字化功能。

其核心能力包括 ：掃描合同、票據、會議記錄并保存為 PDF 分享。拍攝課堂 PPT、書籍章節生成圖片存檔。快速識別表格數據，減少手動錄入成本。

在HarmonyOS 5.0 及以上系統的手機 / 平板（ 不支持模擬器 ）。

二、DocumentScanner都具備什么功能？

圖（1-2）

文檔掃描控件提供拍攝文檔并轉換為高清掃描件的服務。

1. 使用手機拍攝文檔，即可自動裁剪和優化，并支持 jpeg圖片、PDF格式保存和分享 。如圖（1-1）所示。
2. 支持拍攝拍照或圖片識別表格，生成 表格文檔 。如圖（1-2）所示。

三、DocumentScanner怎么用？

1. 導入依賴模塊：

import { DocType, DocumentScanner, DocumentScannerConfig, SaveOption, FilterId, ShootingMode, EditTab, DocumentScannerResultCallback } from "@kit.VisionKit";

2. 配置掃描config對象：
定義掃描參數（如拍攝模式、識別類型、濾鏡等）。

private docScanConfig = new DocumentScannerConfig()

  setDocScanConfig() {
    this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET]
    this.docScanConfig.isGallerySupported = true
    this.docScanConfig.editTabs = []
    this.docScanConfig.maxShotCount = 3
    this.docScanConfig.defaultFilterId = FilterId.ORIGINAL
    this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL
    this.docScanConfig.isShareable = true
    this.docScanConfig.originalUris = []
  }

3. UI布局中添加DocumentScanner
將第二步配置創建好的scannerConfig對象進行賦值。
并且處理onResult回調，當掃描處理成功后會返回Uris。

//文檔掃描
        DocumentScanner({
          scannerConfig: this.docScanConfig,
          onResult: (code: number, saveType: SaveOption, uris: string[]) = > {
            hilog.info(0x0001, TAG, `result code: ${code}, save: ${saveType}`)
            if (code === -1) {
              this.pathStack?.pop()
            }
            uris.forEach(uriString = > {
              hilog.info(0x0001, TAG, `uri: ${uriString}`)
            })
            this.docImageUris = uris
          }
        })
          .size({ width: '100%', height: '100%' })

源碼示例分享

// MainPage.ets - 掃描入口頁面

import { NavPathStack } from '@ohos.router';
import { DocDemoPage } from './DocDemoPage'; // 引入掃描實現頁

@Entry
@Component
struct MainPage {
  // 導航棧管理頁面跳轉
  private pathStack: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pathStack) {
      Column({ space: 20 }) {
        // 標題
        Text('文檔掃描Demo').fontSize(24).fontWeight(500);
        
        // 掃描入口按鈕
        Button('開始掃描文檔', { type: ButtonType.Capsule, stateEffect: true })
          .width('60%')
          .height(50)
          .onClick(() = > {
            // 跳轉到掃描頁面
            this.pathStack.pushPath({ name: 'documentScanner' });
          });
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%');
    }
	.navDestination(this.PageMap)
    .mode(NavigationMode.Stack)
    .title('文檔掃描示例');
  }
}

// DocDemoPage.ets - 掃描功能實現與結果展示

import { 
  DocType, DocumentScanner, DocumentScannerConfig, 
  SaveOption, FilterId, ShootingMode, EditTab 
} from "@kit.VisionKit";
import { hilog, LogLevel } from '@ohos.hilog'; // 日志工具

const TAG = 'DocScannerDemo'; // 日志標簽

@Entry
@Component
export struct DocDemoPage {
  @State scanResults: string[] = []; // 保存掃描結果URI
  private pathStack: NavPathStack | null = null;

  // 掃描配置初始化
  private docScanConfig = new DocumentScannerConfig();

  // 頁面加載時配置掃描參數
  aboutToAppear() {
    this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET]; // 支持文檔和表格識別
    this.docScanConfig.maxShotCount = 3; // 最多拍攝3張
    this.docScanConfig.isGallerySupported = true; // 允許從圖庫選圖
    this.docScanConfig.defaultFilterId = FilterId.STRENGTHEN; // 默認增強濾鏡
    this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL; // 手動拍攝模式
    this.docScanConfig.editTabs = [EditTab.ROTATE_TAB, EditTab.RESHOOT_TAB]; // 顯示旋轉和重拍按鈕
    this.docScanConfig.saveOptions = [SaveOption.JPG, SaveOption.PDF, SaveOption.EXCEL]; // 支持三種保存格式
    this.docScanConfig.isShareable = true; // 開啟分享功能
  }

  build() {
    NavDestination({ name: 'documentScanner' }) {
      Stack() {
        // 掃描結果展示區域
        Column() {
          if (this.scanResults.length > 0) {
            Text('掃描結果').fontSize(18).fontWeight(500).margin({ top: 20 });
            Grid() {
              ForEach(this.scanResults, (uri, index) = > {
                // 展示縮略圖，點擊可預覽（示例中簡化為日志輸出）
                Image(uri)
                  .objectFit(ImageFit.Contain)
                  .width(150)
                  .height(150)
                  .margin(10)
                  .onClick(() = > hilog.info(LogLevel.INFO, TAG, `預覽圖片：${uri}`));
              })
              .columnsTemplate('1fr 1fr') // 兩行布局
              .rowGap(10)
              .columnGap(10);
          }
        }
        .width('100%')
        .padding(20);

        // 文檔掃描控件主體
        DocumentScanner({
          scannerConfig: this.docScanConfig,
          onResult: (code: number, saveType: SaveOption, uris: string[]) = > {
            hilog.info(LogLevel.INFO, TAG, `掃描結果：code=${code}, 格式=${SaveOption[saveType]}`);
            switch (code) {
              case 200: // 成功
                this.scanResults = uris; // 更新結果列表
                hilog.info(LogLevel.INFO, TAG, `保存路徑：${uris.join(', ')}`);
                break;
              case -1: // 用戶取消
                this.pathStack.pop(); // 返回上一頁
                break;
              case 1008601001: // URI無效（5.0.5+支持）
                hilog.error(LogLevel.ERROR, TAG, '傳入的圖片規格不符合要求');
                break;
            }
          }
        })
        .size({ width: '100%', height: '100%' })
        .margin({ top: 80 }); // 留出結果展示區域空間
      }
      .width('100%')
      .height('100%')
      .hideTitleBar(true); // 隱藏導航欄
      .onReady((context: NavDestinationContext)= >{
      		this.pathStack = context?.pathStack;
    	})
  }
}

注意

originalUris圖片

• 單邊長度：224px ≤ 長/寬 ≤ 8000px。
• 寬高乘積：≤ 6000×8000 px2。
• 寬高比：≤ 3（即最長邊/最短邊 ≤ 3）。

審核編輯 黃宇