PDFView拖拽能力
===========

#### 问题现象

PC项目中需要通过PDFView预览PDF文件时，用鼠标拖拽不生效，如何实现拖拽行为？

#### 背景知识

[enablePageDrag](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/pdf-arkts-pdfviewmanage#section1587210185315)支持设置页面是否支持拖拽。

| 
参数名

 | 

类型

 | 

必填

 | 

说明

 |
| :-- | :-- | :-- | :-- |
| 

verticalEnabled

 | 

boolean

 | 

是

 | 

是否Y轴垂直拖动，true: 是，false: 否。

 |
| 

horizontalEnabled

 | 

boolean

 | 

是

 | 

是否X轴水平拖动，true: 是，false: 否。

 |

#### 解决方案

使用enablePageDrag接口，设置verticalEnabled和horizontalEnabled属性为true。

完整示例代码如下：

import { pdfService, PdfView, pdfViewManager } from '@kit.PDFKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { common } from '@kit.AbilityKit';
import { promptAction } from '@kit.ArkUI';
import { fileIo as fs } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct PdfDemo {
  private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();
  private context = this.getUIContext().getHostContext() as Context;
  private loadResult: pdfService.ParseResult = pdfService.ParseResult.PARSE\_ERROR\_FORMAT;

  async aboutToAppear(): Promise<void> {
    try {
      _// 确保rawfile目录下有pdf文件_
      await this.copyRawFileToSdcard(this.context, 'testDemo.pdf');
      promptAction.openToast({ message: '全部拷贝完成' });
      const filePath = \`${this.context.filesDir}/testDemo.pdf\`;
      this.controller.loadDocument(filePath).then((result) => {
        this.loadResult = result;
        if (pdfService.ParseResult.PARSE\_SUCCESS === this.loadResult) {
        }
      });
    } catch (error) {
      promptAction.openToast({ message: '文件拷贝失败' });
    }
  }

  build() {
    Column() {
      PdfView({ controller: this.controller })
        .width('100%')
        .height('80%')
      Row() {
        Button('设置拖拽事件')
          .onClick(() => {
            this.controller.enablePageDrag(true, true);
          })
        Blank()
          .width('20%')
        Button('不设置拖拽事件')
          .onClick(() => {
            this.controller.enablePageDrag(false, false);
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('20%')
    }
  }

  _// 拷贝pdf文件到应用沙箱目录_
  private copyRawFileToSdcard(context: common.Context, pdfName: string): Promise<void> {
    return new Promise((resolve) => {
      let destRoot = context.filesDir;
      _// rawfile下的文件名_
      let srcFileName = pdfName;
      let destFilePath = \`${destRoot}/${srcFileName}\`;
      context.resourceManager.getRawFileContent(srcFileName, (error: BusinessError, data: Uint8Array) => {
        if (error) {
          promptAction.openToast({ message: '拷贝失败' });
          hilog.error(0x0000, 'PdfCopy', \`Copy failed: ${error.code}\`);
          return;
        }
        const fileStream = fs.createStreamSync(destFilePath, 'w+');
        fileStream.writeSync(data.buffer);
        fileStream.close();
        promptAction.openToast({ message: '拷贝成功' });
        resolve();
      });
    });
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fa/v3/8pji-mzUT72EMb-ayoKPIw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134305Z&HW-CC-Expire=86400&HW-CC-Sign=83DC6B1D202F0041BBC5CF65116217A0F56CEC334707E8F2416A8CE912D637E5)

需要确保在工程目录“src/main/resources/rawfile”里存在testDemo.pdf文档，并且拷贝testDemo.pdf文档到沙箱目录。

#### 总结

enablePageDrag接口主要场景在PC上，按住一个页面移动鼠标，可以拖动页面。

比如查看PDF时，按住空格键，再拖动鼠标可以移动页面。这个接口就是作用于这类场景的。