HarmonyOS 鸿蒙Next 预览pdf文件

HarmonyOS 鸿蒙Next 预览pdf文件
1、使用filePreview
2、使用web组件

在线pdf（网址是直接下载的，不是直接可以预览的），先下载再预览

typescript 复制代码

import media from '@ohos.multimedia.media';

import web_webview from '@ohos.web.webview';

import { request } from '@kit.BasicServicesKit';

import common from '@ohos.app.ability.common';

import fs from '@ohos.file.fs';

@Entry

@Component

struct WebViewPageDemo {

  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  @State fileUrl: string = ''

  @State title: string = ''

  path=''

  hasFile(filePath:string){

    let b = fs.accessSync(filePath)

    return b

  }

  aboutToAppear() {

    const context = getContext(this) as common.UIAbilityContext

    this.path=context.filesDir+'/1700182405099.pdf'

    console.log('demo ', this.path)

    console.log(this.hasFile(this.path)+'123456')

    if(!this.hasFile(this.path)) {

      request.downloadFile(context, {

        url: 'https://prdc-ams.oss-cn-shenzhen.aliyuncs.com/1700182405099.pdf',

        filePath: this.path

      }).then((data: request.DownloadTask) => {

        data.on('complete', () => {

          console.log('demo complete', this.path)

          this.fileUrl = this.path

        })

        data.on('fail', (err) => {

          console.log('demo fail', this.path)

          this.fileUrl = this.path

        })

      })

    }

  }

  build(){

    Column(){

      Button('loadUrl').onClick(()=>{

        this.webviewController.loadUrl('file://'+this.path)

      })

      Web({src: '', controller: this.webviewController})

        .javaScriptAccess(true)

        .domStorageAccess(true)

        .verticalScrollBarAccess(true)

        .fileAccess(true)

        .height('100%')

        .width('100%').onControllerAttached(() => {

        this.webviewController.loadUrl('file://'+this.path)

      })

    }

    .height('100%')

    .width('100%')

  }

}

3、使用PdfView
PdfView使用的坑

如果是在线pdf，可下载到本地沙箱，然后获取本地地址进行预览
文件目录与路径

typescript 复制代码

import { pdfService, pdfViewManager, PdfView } from '@kit.PDFKit'
import { common } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct PDFView {
  private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();

  aboutToAppear(): void {
    let context = getContext() as common.UIAbilityContext;
    let dir: string = context.filesDir//files文件下
    let filePath: string = dir + "/" + '文件名';

    (async () => {
      let loadResult1: pdfService.ParseResult = await this.controller.loadDocument(filePath);
      if (pdfService.ParseResult.PARSE_SUCCESS === loadResult1) {
        hilog.info(0x0000, 'aboutToAppear', 'PdfView Component has been successfully loaded!');
      }
    })()
  }

  build() {
    Column() {
      Row() {
        PdfView({
          controller: this.controller,
          pageFit: pdfService.PageFit.FIT_WIDTH,
          showScroll: true
        })
          .id('pdfview_app_view')
          .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
    }
  }
}

预览本地rawfile中的pdf

typescript 复制代码

import { pdfService, pdfViewManager, PdfView } from '@kit.PDFKit'
import { common } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();

  aboutToAppear(): void {
    let context = getContext() as common.UIAbilityContext;
    let dir: string = context.filesDir
    // 确保在工程目录src/main/resources/rawfile里存在input.pdf文档
    let filePath: string = dir + '/input.pdf';
    let res = fileIo.accessSync(filePath);
    if (!res) {
      let content: Uint8Array = context.resourceManager.getRawFileContentSync('rawfile/input.pdf');
      let fdSand =
        fileIo.openSync(filePath, fileIo.OpenMode.WRITE_ONLY | fileIo.OpenMode.CREATE | fileIo.OpenMode.TRUNC);
      fileIo.writeSync(fdSand.fd, content.buffer);
      fileIo.closeSync(fdSand.fd);
    }
    (async () => {
      // 该监听方法只能在文档加载前调用一次
      this.controller.registerPageCountChangedListener((pageCount: number) => {
        hilog.info(0x0000, 'registerPageCountChanged-', pageCount.toString());
      });
      let loadResult1: pdfService.ParseResult = await this.controller.loadDocument(filePath);
      // 注意：这里刚加载文档，请不要在这里立即设置PDF文档的预览方式
    })()
  }

  build() {
    Row() {
      PdfView({
        controller: this.controller,
        pageFit: pdfService.PageFit.FIT_WIDTH,
        showScroll: true
      })
        .id('pdfview_app_view')
        .layoutWeight(1);
    }
    .width('100%')
    .height('100%')
  }
}