# 如何使用Web组件下载pdf文件并展示给用户

**问题场景**

使用Webview加载指定URL，下载PDF文件并展示。

**解决措施**

通过onLoadIntercept方法可以区分是否下载 PDF 文件。下载 PDF 功能可以通过request.agent.create方法实现。

具体实现逻辑为：首先，使用request模块将网络PDF下载到沙箱路径，然后通过Web组件加载并展示给用户。

在工程的module.json5配置文件中添加网络访问权限ohos.permission.INTERNET。

**参考代码**

```
import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { request } from '@kit.BasicServicesKit';

let context = AppStorage.get("context") as UIContext;
let filesDir = context.getHostContext()!.filesDir;
let config: request.agent.Config = {
  action: request.agent.Action.DOWNLOAD,
  url: '',
  title: 'createTest',
  description: 'Sample code for create task',
  mode: request.agent.Mode.FOREGROUND,
  overwrite: true,
  method: 'get',
  saveas: filesDir + '/test.pdf',
  network: request.agent.Network.WIFI,
  metered: false,
  roaming: true,
  retry: true,
  redirect: true,
  index: 0,
  begins: 0,
  ends: -1,
  gauge: false,
  precise: false,
  token: 'it is a secret'
};
let createOnCallback = (progress: request.agent.Progress) => {
  console.info('download task completed.');
  context.getPromptAction().showToast({
    message: 'Download completed',
    duration: 2000
  });
};

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  @State uri: string = '';
  @State isChange: boolean = false;

  build() {
    Column() {
      Button('Refresh UI')
        .width('200vp')
        .onClick(() => {
          this.controller.loadUrl('file://' + filesDir + '/test.pdf');
        })
        .margin({ bottom: '20vp' })
      Web({ src: $rawfile('WebDownloadPDF.html'), controller: this.controller })
        .fileAccess(true)
        .domStorageAccess(true)
        .onPageBegin((event) => {
          request.agent.create(this.getUIContext().getHostContext(), config).then((task: request.agent.Task) => {
            task.on('completed', createOnCallback);
            console.info(`Succeeded in creating a download task. result: ${task.config}`);
            task.start();
          }).catch((err: Error) => {
            console.error(`Failed to create a download task, message: ${err.message}`);
          });
        })
    }
  }
}
```