HarmonyOS鸿蒙Next中web组件如何加载Html文本内容

HarmonyOS鸿蒙Next中web组件如何加载Html文本内容 如题，web组件如何加载Html文本内容，不是url

3 回复

Web组件可以通过loadData()接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面，当加载大量html文件时，需设置第四个参数baseUrl为"data"。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadData，加载HTML格式的文本数据
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

Web组件可以通过data url方式直接加载HTML字符串。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  htmlStr: string = "data:text/html, <html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>";

  build() {
    Column() {
      // 组件创建时，加载htmlStr
      Web({ src: this.htmlStr, controller: this.controller })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中web组件如何加载Html文本内容的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用Web组件加载HTML文本内容需通过loadData()方法实现。首先创建Web组件实例，然后调用loadData()并传入HTML字符串、MIME类型（如"text/html"）及字符编码（如"UTF-8"）。示例代码：webView.loadData(htmlContent, "text/html", "UTF-8")。该方法直接将HTML字符串渲染为网页内容，无需网络请求或外部文件。

在HarmonyOS Next中，可以通过Web组件的loadData()方法直接加载HTML文本内容。具体实现如下：

  1. 在布局文件中声明Web组件：
<Web
    ohos:id="$+id:web_component"
    ohos:height="match_parent"
    ohos:width="match_parent"/>
  1. 在代码中获取组件并加载HTML：
Web webComponent = (Web) findComponentById(ResourceTable.Id_web_component);
String htmlContent = "<html><body><h1>Hello HarmonyOS</h1></body></html>";
webComponent.loadData(htmlContent, "text/html", "UTF-8");

关键参数说明：

  • 第一个参数：要加载的HTML字符串
  • 第二个参数：MIME类型，固定为"text/html"
  • 第三个参数：编码格式，通常使用"UTF-8"

这种方法适用于动态生成的HTML内容，无需网络请求即可直接渲染。注意确保HTML字符串格式正确，避免包含非法字符。

回到顶部