元服务打开PDF文件的方式

问题现象

元服务打开PDF文件有哪些方式？

背景知识

目前pdfViewManager能力不支持在元服务上使用，推荐使用AtomicServiceEnhancedWeb组件和文件预览在元服务中打开PDF文件。

解决方案

有两种方案可以在元服务中打开PDF文件：AtomicServiceEnhancedWeb组件和文件预览。需要注意的是，AtomicServiceEnhancedWeb组件可以在元服务内打开PDF，而文件预览会跳出当前元服务。

方案一：使用AtomicServiceEnhancedWeb组件可直接打开PDF文件，适合不切换应用，在应用内预览PDF文件的场景。使用AtomicServiceEnhancedWeb组件之前需要完成开发准备，可参考以下文档：环境搭建。

import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';

@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();

  build() {
    Column() {
      // 本地资源，需自行替换
      AtomicServiceEnhancedWeb({ src: $rawfile('sample.pdf'), controller: this.controller });
    };
  }
}

方案二：元服务中支持使用文件预览能力打开PDF文件，该能力会将当前应用切换至后台，并启动预览界面。

import { common } from '@kit.AbilityKit';
import { fileIo as fs, fileUri } from '@kit.CoreFileKit';
import { filePreview } from '@kit.PreviewKit';
import { BusinessError } from '@kit.BasicServicesKit';

function previewLocalPdf(context: common.UIAbilityContext) {
  try {
    // 假设我们已经在data目录下放置了一个sample.pdf文件
    const filePath = context.filesDir + '/sample.pdf';
    // 检查文件是否存在
    const isExist = fs.accessSync(filePath);
    if (!isExist) {
      console.error('The local file does not exist. Please ensure the file has been placed in the application directory.');
      return;
    }
    // 构建PreviewInfo
    let uri = fileUri.getUriFromPath(filePath);
    let fileInfo: filePreview.PreviewInfo = {
      title: 'sample.pdf',
      uri: uri,
      mimeType: 'application/pdf',
    };
    // 打开文件预览
    filePreview.openPreview(context, fileInfo).then(() => {
      console.info('Succeeded in opening preview');
    }).catch((err: BusinessError) => {
      console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
    });

  } catch (error) {
    console.error(`Failed to preview local file: ${JSON.stringify(error)}`);
  }
}

@Entry
@Component
struct PDFPage {
  build() {
    Column() {
      Button('预览PDF').onClick(() => {
        let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
        previewLocalPdf(context);
      });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}