使用PdfView如何实现左右滑动预览的HarmonyOS 鸿蒙Next pdf

使用PdfView如何实现左右滑动预览的HarmonyOS 鸿蒙Next pdf 【标题】使用PdfView如何实现左右滑动预览的pdf

【设备信息】

【API版本】Api14

【DevEco Studio版本】 5.0.5.315

【问题描述】使用PdfView如何实现左右滑动预览的pdf，我参考官网文档的代码，目前没办法左右滑动。

【问题相关代码】

PdfView({
    controller: this.controller,
    pageFit: pdfService.PageFit.FIT_WIDTH,
    showScroll: true
})
.id('pdfview_app_view')
.layoutWeight(1);

更多关于使用PdfView如何实现左右滑动预览的HarmonyOS 鸿蒙Next pdf的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

兄弟，我看你这个代码中是按照页面宽度来适配页面的：

可以按照文件实际大小来试下，可以参考下面这个代码：

import { request } from '@kit.BasicServicesKit';
import { fileUri } from '@kit.CoreFileKit';
import { pdfService, PdfView, pdfViewManager } from '@kit.PDFKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State downloadUrl: string = '在线pdf地址';
  @State filePath: string = ''

  pdfController = new pdfViewManager.PdfController();

  async aboutToAppear(): Promise<void> {

    //设置沙箱路径
    let filePath = getContext().cacheDir + '/' + Date.now() + '.pdf'

    //创建下载任务
    const task = await request.downloadFile(getContext(), {
      //设置图片的源地址
      url: this.downloadUrl,
      //设置图片存储路径
      filePath: filePath
    })
    //监听下载任务
    task.on('complete', async () => {
      //保存图片的沙箱路径
      this.filePath = filePath
      console.log(`转换后的路径为：${fileUri.getUriFromPath(filePath)}`)
      //获取图片的沙箱路径
      this.filePath = fileUri.getUriFromPath(filePath)

      let loadResult: pdfService.ParseResult = await this.pdfController.loadDocument(filePath);
    })

  }

  build() {
    Column() {
      PdfView({
        controller: this.pdfController,
        pageFit: pdfService.PageFit.FIT_NONE,
        showScroll: false
      })
        .id('pdfview_app_view')
        .layoutWeight(1);
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

更多关于使用PdfView如何实现左右滑动预览的HarmonyOS 鸿蒙Next pdf的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我还纳闷为啥是空白，结果仔细一看才发现大佬你给的代码里pdf的网络地址没有填。

谢啦。

在HarmonyOS中，使用PdfView实现左右滑动预览PDF文件，可以通过PageSlider和PdfView组件结合实现。首先，使用PdfView加载PDF文件，然后通过PageSlider控制页面滑动。PdfView提供getPageCount()方法获取总页数，goToPage(int page)方法跳转到指定页面。PageSlider监听滑动事件，更新PdfView显示的页面。具体实现如下：

  1. 引入PdfView和PageSlider组件。
  2. 使用PdfView加载PDF文件，获取总页数。
  3. 设置PageSlider的最大值为总页数，监听滑动事件。
  4. 在滑动事件中调用PdfView的goToPage(int page)方法，更新显示的页面。

示例代码：

import { PdfView, PageSlider } from '@ohos/pdf';

let pdfView = new PdfView();
pdfView.loadDocument("path/to/pdf");

let pageSlider = new PageSlider();
pageSlider.setMaxValue(pdfView.getPageCount());

pageSlider.onChange((page) => {
    pdfView.goToPage(page);
});
回到顶部