鸿蒙开发者社区

公众号矩阵

移动端

视频课免费课排行榜短视频直播课软考学堂

全部课程软考信创认证华为认证厂商认证 IT技术 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS Web组件加载富文本时如何引用本地css和js

新闻类app，新闻详情都是接口返回的富文本样式，app端封装html 数据时，如何引入本地css和js文件。

HarmonyOS

2024-09-04 10:59:12

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

参考代码：

import webview from '@kit.ArkWeb' 
import business_error from '@kit.BasicServicesKit'; 
import { buffer } from '@kit.ArkTS'; 
@Entry 
@Component 
export struct WebDemo { 
  controller = new webview.WebviewController() 
  @State userAgent:string ="Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile" 
  htmlContent = '<html><head></head><body>Source:<pre>source</pre></body></html>' 
  aboutToAppear(): void { 
    webview.WebviewController.setWebDebuggingAccess(true); 
    const context = getContext() 
    const style = context.resourceManager.getRawFileContentSync('style.css') 
    this.htmlContent = `<style>${buffer.from(style).toString()}</style>${this.htmlContent}` 
    console.log(`test: ${this.htmlContent}`) 
  } 
  build() { 
    Column() { 
      Button('loadData') 
        .onClick(() => { 
          try { 
            // 点击按钮时，通过loadData，加载HTML格式的文本数据 
            this.controller.loadData( 
              this.htmlContent, 
              "text/html", 
              "UTF-8" 
            ); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`); 
          } 
        }) 
      // 组件创建时 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
    } 
  } 
} 
//这段就是读取rawfile下的style.css文件，然后拼接到html上 
const context = getContext() 
const style = context.resourceManager.getRawFileContentSync('style.css') 
this.htmlContent = `<style>${buffer.from(style).toString()}</style>${this.htmlContent}` 
console.log(`test: ${this.htmlContent}`)

回复

2024-09-04 15:15:38

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

发布

相关问题

HarmonyOS Web组件加载富文本异常

1574浏览 • 1回复待解决

HarmonyOS web控件加载富文本，字太小

1927浏览 • 1回复待解决

HarmonyOS 使用RichText加载富文本字体太小，且加载富文本时偶现白屏无法显示富文本内容

1254浏览 • 1回复待解决

HarmonyOS Web组件加载富文本字体太小，如何设置字体大小？

2584浏览 • 1回复待解决

HarmonyOS Web加载富文本，内容尺寸过大，超出屏幕

1656浏览 • 1回复待解决

HarmonyOS如何加载富文本内容，不使用web的方式?

1353浏览 • 1回复待解决

HarmonyOS 加载富文本问题

1385浏览 • 1回复待解决

HarmonyOS Web组件加载html字符串无法引用本地文件

1552浏览 • 1回复待解决

富文本在web组件中无法展示

3381浏览 • 1回复待解决

HarmonyOS web加载本地沙箱HTML和JS文件无法显示

2294浏览 • 1回复待解决

TextArea组件是否支持输入富文本（比如emoji表情和富文本）

3666浏览 • 1回复待解决

HarmonyOS 使用web加载生成的html文本，怎么在这段html文本中引用rawfile或者应用cache下的css文件

1370浏览 • 1回复待解决

HarmonyOS web组件如何加载本地字库？

1555浏览 • 1回复待解决

HarmonyOS 如何支持表情和富文本

2909浏览 • 2回复待解决

HarmonyOS 富文本加载页面适配不兼容

1251浏览 • 1回复待解决

HarmonyOS 富文本组件问题

1580浏览 • 1回复待解决

HarmonyOS Text组件如何展示富文本内容？

1402浏览 • 1回复待解决

HarmonyOS web组件和js交互

1131浏览 • 1回复待解决

HarmonyOS webview加载富文本怎么自适应大小

1039浏览 • 1回复待解决

HarmonyOS web组件内的html如何加载本地资源？

2429浏览 • 1回复待解决

HarmonyOS Text组件富文本解析问题

1088浏览 • 1回复待解决

如何使用Web组件加载本地的html文件？

2117浏览 • 1回复待解决

HarmonyOS web组件加载本地HTML字符串时无法自适应高度

1248浏览 • 1回复待解决

HarmonyOS web组件如何拉起vue或者react的本地js资源

1089浏览 • 1回复待解决

HarmonyOS Webview通过loadData加载富文本内容不显示，但是通过loadUrl加载同样的富文本html文件就可以正常显示。

1135浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

HarmonyOS—使用Web组件加载页面 0回复

鸿蒙原生应用元服务开发-Web加载本地页面 0回复

HarmonyOs webview 加载本地html 6回复

【HarmonyOS】富文本编辑器RichEditor详解 0回复

【HarmonyOS Next之旅】基于ArkTS开发(三) -＞兼容JS的类Web开发(六) -＞ CSS动画 0回复

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载