文档管理中心
我的

您当前正在浏览新版开发者文档中心,目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标,可切换文档分类。 了解新版目录

指南与API参考指南应用服务PDF Kit(PDF服务)PdfView预览组件高亮显示PDF文档

高亮显示PDF文档

PDF文档在预览时,可以对页面的矩形区域或文本设置高亮显示,高亮颜色可以自定义。

setHighlightText可以同时高亮多个不同的文本。

接口说明

展开
接口名 描述
setHighlightText(pageIndex: number, textArray: string[], color: number): void 高亮指定文本。
注意

setHighlightText和searchKey功能互斥。

示例代码

  1. 加载PDF文档。

  2. 调用PdfView预览组件,渲染显示。

  3. 在按钮【setHighlightText】里,调用setHighlightText方法,设置单个或多个要高亮的文本。

收起
自动换行
深色代码主题
复制
  1. import { pdfService, PdfView, pdfViewManager } from '@kit.PDFKit';
  2. // ...
  3. @Entry
  4. @Component
  5. struct HighlightPage {
  6. private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();
  7. private context = this.getUIContext().getHostContext() as Context;
  8. private loadResult: pdfService.ParseResult = pdfService.ParseResult.PARSE_ERROR_FORMAT;
  9. aboutToAppear(): void {
  10. // 确保在工程目录src/main/resources/resfile里存在input.pdf文档
  11. let filePath = this.context.resourceDir + '/input.pdf';
  12. (async () => {
  13. this.loadResult = await this.controller.loadDocument(filePath);
  14. })()
  15. }
  16. build() {
  17. // ...
  18. Column() {
  19. Row() {
  20. // 设置文本的高亮显示风格
  21. Button('setHighlightText').onClick(async () => {
  22. if (this.loadResult === pdfService.ParseResult.PARSE_SUCCESS) {
  23. this.controller.setHighlightText(0, ['PDF'], 0xAAF9CC00);
  24. }
  25. })
  26. }
  27. // 加载PdfView组件进行预览
  28. PdfView({
  29. controller: this.controller,
  30. pageFit: pdfService.PageFit.FIT_WIDTH,
  31. showScroll: true
  32. })
  33. .id('pdfview_app_view')
  34. .layoutWeight(1);
  35. }
  36. // ...
  37. .width('100%').height('100%')
  38. }
  39. }