使用Web组件下载能力Demo

提供web组件下载能力Demo。

HarmonyOS
2024-09-06 10:06:58
浏览
收藏 0
回答 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>
分享
微博
QQ
微信
回复
2024-09-06 17:16:42
相关问题
怎样实现Web组件下载能力
477浏览 • 1回复 待解决
需要web组件JSBridge通信的demo
239浏览 • 1回复 待解决
Web组件如何发起一个下载任务?
422浏览 • 1回复 待解决
web组件之cookie的使用
1219浏览 • 1回复 待解决
HarmonyOS web组件使用
331浏览 • 1回复 待解决
HarmonyOS 使用Web组件加载页面示例
431浏览 • 1回复 待解决
JS API 中 web组件 怎么使用
5323浏览 • 1回复 待解决
HarmonyOS Web组件使用localStorage报错
549浏览 • 1回复 待解决
requestPermissionsFromUser使用Demo
1575浏览 • 1回复 待解决
HarmonyOS使用Web组件预览PDF和图片
688浏览 • 1回复 待解决
HarmonyOS使用Web组件如何监听滚动位置
552浏览 • 2回复 待解决
使用Web组件加载网页,显示空白。
439浏览 • 1回复 待解决
OpenHarmony 使用WEB组件传值问题
3477浏览 • 1回复 待解决
提供一个关于地图组件使用的小demo
547浏览 • 1回复 待解决
HarmonyOS Web组件和List的嵌套使用问题
223浏览 • 1回复 待解决
使用web组件实现预览沙箱中pdf
1984浏览 • 1回复 待解决