文档管理中心

文档扫描

场景介绍

文档扫描控件提供拍摄文档并转换为高清扫描件的服务。仅需拍摄文档,即可自动裁剪和优化,并支持图片、PDF格式保存和分享;同时支持拍摄或从图库选择图片识别表格,生成表格文档。

可广泛用于教育办公场景,扫描文档、票据、课堂PPT和书籍等输出图片/PDF供用户完成发送、存档等操作。

图1 文档扫描示意图

约束与限制

  • 支持的语种类型:简体中文、英文。

  • 文档扫描暂时只支持phone、tablet设备。

  • 不允许被其他组件或窗口遮挡。

接口说明

以下仅列出demo中调用的部分主要接口,具体API说明详见API参考

展开
接口名 描述
DocumentScanner 文档扫描控件
DocumentScannerResultCallback 文档扫描结果

开发步骤

  1. 将文档扫描控件相关的类添加至工程。

    收起
    自动换行
    深色代码主题
    复制
    1. import { DocType, DocumentScanner, DocumentScannerConfig, SaveOption, FilterId, ShootingMode, DocumentScannerController } from '@kit.VisionKit';
    2. import { hilog } from '@kit.PerformanceAnalysisKit';
  2. 部分设备不支持文档扫描控件的表格提取功能。在使用该功能前,建议先调用isSheetDetectionSupported接口查询当前设备是否支持。

    收起
    自动换行
    深色代码主题
    复制
    1. let documentScannerController: DocumentScannerController = new DocumentScannerController();
    2. let isSheetSupported = documentScannerController.isSheetDetectionSupported();
    3. hilog.info(0x0001, TAG, `isSheetSupported: ${isSheetSupported}`);
  3. 配置布局,根据业务场景配置文档扫描控件的相关属性,获取返回的文档图片uri列表。

    收起
    自动换行
    深色代码主题
    复制
    1. const TAG = 'DocumentScanner';
    2. @Entry
    3. @Component
    4. struct Index {
    5. private docScanConfig = new DocumentScannerConfig();
    6. aboutToAppear() {
    7. let documentScannerController: DocumentScannerController = new DocumentScannerController();
    8. let isSheetSupported = documentScannerController.isSheetDetectionSupported();
    9. if (isSheetSupported) {
    10. this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET];
    11. } else {
    12. this.docScanConfig.supportType = [DocType.DOC];
    13. }
    14. this.docScanConfig.isGallerySupported = true;
    15. this.docScanConfig.editTabs = [];
    16. this.docScanConfig.maxShotCount = 3;
    17. this.docScanConfig.defaultFilterId = FilterId.ORIGINAL;
    18. this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL;
    19. this.docScanConfig.isShareable = true;
    20. this.docScanConfig.originalUris = [];
    21. }
    22. build() {
    23. Column() {
    24. DocumentScanner({
    25. scannerConfig: this.docScanConfig,
    26. onResult: (code: number, saveType: SaveOption, uris: string[]) => {
    27. hilog.info(0x0001, TAG, `result code: ${code}, save: ${saveType}`);
    28. uris.forEach(uriString => {
    29. hilog.info(0x0001, TAG, `uri: ${uriString}`);
    30. })
    31. }
    32. }).size({ width: '100%', height: '100%' })
    33. }
    34. .height('100%')
    35. .width('100%')
    36. }
    37. }

开发实例

Index.ets

收起
自动换行
深色代码主题
复制
  1. // 开发实例分两页实现,一页为文档扫描入口页,一页为文档扫描实现页
  2. // 文档扫描入口页,需引入文档扫描实现页,以下文实例为例,实现页文件名为DocDemoPage
  3. import { DocDemoPage } from './DocDemoPage';
  4. @Entry
  5. @Component
  6. struct MainPage {
  7. @Provide('pathStack') pathStack: NavPathStack = new NavPathStack();
  8. @Builder
  9. PageMap(name: string) {
  10. if (name === 'documentScanner') {
  11. DocDemoPage()
  12. }
  13. }
  14. // 文档扫描入口按钮,可替换为业务入口
  15. build() {
  16. Navigation(this.pathStack) {
  17. Button('DocumentScanner', { stateEffect: true, type: ButtonType.Capsule })
  18. .width('50%')
  19. .height(40)
  20. .onClick(() => {
  21. this.pathStack.pushPath({ name: 'documentScanner' });
  22. })
  23. }.title('文档扫描控件demo').navDestination(this.PageMap)
  24. .mode(NavigationMode.Stack)
  25. }
  26. }

DocDemoPage.ets

收起
自动换行
深色代码主题
复制
  1. // 文档扫描实现页,文件名为DocDemoPage,需被引入至入口页
  2. import {
  3. DocType,
  4. DocumentScanner,
  5. DocumentScannerConfig,
  6. SaveOption,
  7. FilterId,
  8. ShootingMode,
  9. DocumentScannerController
  10. } from '@kit.VisionKit';
  11. import { hilog } from '@kit.PerformanceAnalysisKit';
  12. const TAG: string = 'DocDemoPage';
  13. // 文档扫描页,用于加载UIExtensionAbility
  14. @Component
  15. export struct DocDemoPage {
  16. @State docImageUris: string[] = [];
  17. @Consume('pathStack') pathStack: NavPathStack;
  18. private docScanConfig = new DocumentScannerConfig();
  19. aboutToAppear() {
  20. let documentScannerController: DocumentScannerController = new DocumentScannerController();
  21. let isSheetSupported = documentScannerController.isSheetDetectionSupported();
  22. if (isSheetSupported) {
  23. this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET];
  24. } else {
  25. this.docScanConfig.supportType = [DocType.DOC];
  26. }
  27. this.docScanConfig.isGallerySupported = true;
  28. this.docScanConfig.editTabs = [];
  29. this.docScanConfig.maxShotCount = 3;
  30. this.docScanConfig.defaultFilterId = FilterId.ORIGINAL;
  31. this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL;
  32. this.docScanConfig.isShareable = true;
  33. this.docScanConfig.originalUris = [];
  34. }
  35. build() {
  36. NavDestination() {
  37. Stack({ alignContent: Alignment.Top }) {
  38. // 展示文档扫描结果
  39. List() {
  40. ForEach(this.docImageUris, (uri: string) => {
  41. ListItem() {
  42. Image(uri)
  43. .objectFit(ImageFit.Contain)
  44. .width(100)
  45. .height(100)
  46. }
  47. })
  48. }
  49. .listDirection(Axis.Vertical)
  50. .alignListItem(ListItemAlign.Center)
  51. .margin({
  52. top: 50
  53. })
  54. .width('80%')
  55. .height('80%')
  56. // 文档扫描
  57. DocumentScanner({
  58. scannerConfig: this.docScanConfig,
  59. onResult: (code: number, saveType: SaveOption, uris: string[]) => {
  60. hilog.info(0x0001, TAG, `result code: ${code}, save: ${saveType}`);
  61. if (code === -1) {
  62. this.pathStack.pop();
  63. }
  64. uris.forEach(uriString => {
  65. hilog.info(0x0001, TAG, `uri: ${uriString}`);
  66. })
  67. this.docImageUris = uris;
  68. }
  69. })
  70. .size({ width: '100%', height: '100%' })
  71. }
  72. .width('100%')
  73. .height('100%')
  74. }
  75. .width('100%')
  76. .height('100%')
  77. .hideTitleBar(true)
  78. }
  79. }
搜索
请输入您想要搜索的关键词