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

**问题场景**

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

**解决措施**

通过[onLoadIntercept](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onloadintercept10)方法可以区分是否下载 PDF 文件。下载 PDF 功能可以通过[request.agent.create](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-request#requestagentcreate10)方法实现。

具体实现逻辑为：首先，使用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: 'https://www-file.huawei.com/minisite/media/annual\_report/annual\_report\_2023\_cn.pdf',
  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}\`);
          });
        })
    }
  }
}