使用Web组件下载能力Demo

提供web组件下载能力Demo。

HarmonyOS

FengTianYa

2024-09-06 10:06:58

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

demo如下

1、监听页面触发的下载

import web_webview from '@ohos.web.webview' 
import business_error from '@ohos.base' 
 
@Entry 
@Component 
struct DownloadDelegate { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  delegate:web_webview.WebDownloadDelegate = new web_webview.WebDownloadDelegate(); 
  @State flag:string = ''; 
  @State progress:string = '0'; 
  @State speed:string = ''; 
  @State isSuccess:string = ''; 
  build() { 
    Column(){ 
      Text('下载的任务标识:'+this.flag) 
      Text('下载的进度:'+this.progress+'%') 
      Text('下载的速度:'+this.speed) 
      Text('下载的情况:'+this.isSuccess) 
      Button('setDownloadDelegate') 
        .onClick(()=>{ 
          try{ 
            this.controller.startDownload('https://www.huawei.com/AppGalleryConnect/agc-template-market-harmonyos-demos/zip/refs/heads/main'); 
            this.delegate.onBeforeDownload((webDownloadItem:web_webview.WebDownloadItem)=>{ 
              console.log('准备开始下载'); 
              // 文件下载地址 
              webDownloadItem.start('/docs/storage/Users/currentUser/Documents/'+webDownloadItem.getSuggestedFileName()); 
              // 图片下载地址 
              // webDownloadItem.start('file://media/Photo'+webDownloadItem.getSuggestedFileName()); 
            }) 
 
            this.delegate.onDownloadUpdated((webDownloadItem:web_webview.WebDownloadItem)=>{ 
              this.flag = webDownloadItem.getGuid(); 
              this.progress = JSON.stringify(webDownloadItem.getPercentComplete()); 
              this.speed = JSON.stringify(webDownloadItem.getCurrentSpeed()); 
            }) 
 
            this.delegate.onDownloadFailed((webDownloadItem:web_webview.WebDownloadItem)=>{ 
              this.isSuccess = '下载失败'; 
            }) 
 
            this.delegate.onDownloadFinish((webDownloadItem:web_webview.WebDownloadItem)=>{ 
              this.isSuccess = '下载成功'; 
            }) 
 
            this.controller.setDownloadDelegate(this.delegate); 
          }catch(error){ 
            let e:business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
 
      Web({ src: 'www.huawei.com', controller: this.controller }) 
    } 
  } 
}

2、使用Web组件发起一个下载任务。

import web_webview from '@ohos.web.webview'; 
 
@Entry 
@Component 
struct Index { 
  aboutToAppear() { 
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
  //配置Web开启调试模式 
  webController: web_webview.WebviewController = new web_webview.WebviewController(); 
 
  build() { 
    Column() { 
      // Web component loading H5. 
      Web({ src: $rawfile('pdf/index.html'), controller: this.webController }) 
    } 
  } 
} 
index.html页面： 
<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title> 
  <link rel="stylesheet" href="./css/pdfh5.css" /> 
  <link rel="stylesheet" href="./css/style.css" /> 
  <script src="./js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> 
  <script src="./js/pdf.js" type="text/javascript" charset="utf-8"></script> 
  <script src="./js/pdf.worker.js" type="text/javascript" charset="utf-8"></script> 
  <script src="./js/pdfh5.js" type="text/javascript" charset="utf-8"></script> 
  <style> 
  html, body { 
  height: 100%; 
} 
</style> 
  </head> 
  <body> 
  <div id="view"></div> 
  <script> 
  new Pdfh5("#view", { 
    pdfurl: 'https://www.huawei.cn/xxx/pdfFile/2023_PDF.pdf', 
  }); 
</script> 
  </body> 
  </html>

2024-09-06 17:16:42

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

使用Web组件下载能力Demo

订阅鸿蒙技术特刊，精选内容抢先看