HarmonyOS鸿蒙Next中如何使用FilePreview预览网络文件

【背景知识】

HarmonyOS提供了FilePreview框架，这是一个用于文件预览的统一接口服务。它支持多种文件格式的预览，包括但不限于：

• 文档类：pdf、doc、docx、ppt、pptx、xls、xlsx 等。
• 图片类：jpg、png、gif 等。
• 音频类：m4a、aac、mp3、ogg、wav 等。
• 视频类：mp4、mkv、ts 等。
• 其他常见格式

FilePreview服务的主要优势在于：

• 统一的API接口。
• 支持多种文件来源。
• 内置多种文件格式解析能力。

【解决方案】

文件预览服务FilePreview暂不支持在线预览，对于网络文件需要下载到本地之后进行本地文件预览。示例代码：

async function previewNetworkFile() {
  const url = 'https://example.com/sample.pdf'; // 替换为实际可用的PDF URL
  let filePath = this.context.filesDir + '/sample.pdf'
  try {
    //网络文件下载到本地
    let res = fs.accessSync(filePath);
    if (res) {
      //本地文件存在  则直接调用预览方法
      console.info('file exists and ViewFile');
      let uri = fileUri.getUriFromPath(filePath);
      let fileInfo: filePreview.PreviewInfo = {
        title: 'sample.pdf',
        uri: uri,
        mimeType: 'application/pdf',
      };
      //打开文件预览
      filePreview.openPreview(this.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}`);
      });
    } else {
      //文件下载到本地
      request.downloadFile(this.context, {
        url: url,
        filePath: filePath
      }).then((downloadTask: request.DownloadTask) => {
        //下载完成回调
        downloadTask.on('complete', () => {
          console.info ('download complete');
          let uri = fileUri.getUriFromPath(filePath);
          let fileInfo: filePreview.PreviewInfo = {
            title: 'sample.pdf',
            uri: uri,
            mimeType: 'application/pdf',
          };
          //打开文件预览
          filePreview.openPreview(this.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((err: BusinessError) => {
        console.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
      });
    }
  } catch (error) {
    let err: BusinessError = error as BusinessError;
    console.error(`Invoke downloadFile failed, code is ${err.code}, message is ${err.message}`);
  }
}

【扩展场景】

通过FilePreview预览网络图片，可以通过FilePreview预览本地文件及应用预制在rawfile下的文件，使用方式：

• 本地文件指存储在应用沙箱目录或公共目录中的文件，该类文件的预览可以参考官方文档：本地文件预览，示例代码：

function previewLocalFile() {
  try {
    // 假设我们已经在data目录下放置了一个sample.pdf文件
    const filePath = this.context.filesDir + '/sample.pdf';
    // 检查文件是否存在
    const isExist = fs.accessSync(filePath);
    if (!isExist) {
      console.error('本地文件不存在，请确保文件已放置到应用目录');
      return;
    }
    //构建PreviewInfo
    let uri = fileUri.getUriFromPath(filePath);
    let fileInfo: filePreview.PreviewInfo = {
      title: 'sample.pdf',
      uri: uri,
      mimeType: 'application/pdf',
    };
    //打开文件预览
    filePreview.openPreview(this.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('预览本地文件失败: ' + JSON.stringify(error));
  }
}

• rawfile文件预览，当前API不支持直接预览rawFile文件，预览时需要先将rawfile导入至沙箱路径，示例代码：

function previewRawFile() {
  try {
    // 预览rawfile文件,需要将文件复制到沙箱目录
    let filePath = this.context.filesDir + 'sample.dpf';
    const resourceMgr = this.context.resourceManager;
    resourceMgr.getRawFileContent('sample.pdf', (err, value) => {
      let myBuffer: ArrayBufferLike = value.buffer;
      //创建sample.pdf沙箱路径，并写入数据
      let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
      fs.writeSync(file.fd, myBuffer);
      fs.close(file);
    })
    let uri = fileUri.getUriFromPath(filePath);
    let fileInfo: filePreview.PreviewInfo = {
      title: 'sample.pdf',
      uri: uri,
      mimeType: 'application/pdf',
    };
    //打开文件预览
    filePreview.openPreview(this.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('预览rawfile文件失败: ' + JSON.stringify(error));
  }
}

【常见FAQ】

Q：模拟器是否支持FilePreview（文件预览）？

A：从模拟器与真机差异中可以看出，模拟器暂不支持FilePreview（文件预览）。如果开发者没有真机使用，可以使用华为提供的云调试进行调试。

【总结】

通过FilePreview预览文件，对于本地文件可以直接读取进行预览，对于rawfile下文件、网络文件，则需要将文件先下载/复制至应用沙箱，在进行预览。