使用Web组件打印前端页面
介绍
- 本工程主要实现了对指南文档 使用Web组件打印前端页面 中示例代码片段的工程化,主要目标是实现指南中示例代码需要与sample工程文件同源。
InitiatePrintW3CAPI
介绍
- 本示例主要介绍使用Web组件打印前端页面,通过创建打印适配器,拉起打印应用,并对当前Web页面内容进行渲染,渲染后生成的PDF文件信息通过fd传递给打印框架。W3C标准协议接口window.print()方法用于打印当前页面或弹出打印对话框。该方法没有任何参数,只需要在JavaScript中调用即可。
效果预览
| 主页 |
|---|
![]() |
使用说明
- 点击print按钮,触发window.print()操作,即可对页面内容进行打印。
InitiatePrintAppAPI
介绍
- 本示例主要介绍使用Web组件打印前端页面,应用侧通过调用createWebPrintDocumentAdapter创建打印适配器,通过将适配器传入打印的print接口调起打印。
效果预览
| 主页 |
|---|
![]() |
使用说明
- 点击createWebPrintDocumentAdapter按钮应用侧会创建打印适配器,并将其传入打印接口,以触发打印操作。
使用Web组件的PDF文档预览能力
介绍
- 本工程主要实现了对指南文档 使用Web组件的PDF文档预览能力 中示例代码片段的工程化,主要目标是实现指南中示例代码需要与sample工程文件同源。
PreviewPDF
介绍
- 本示例主要介绍使用Web组件的PDF文档预览能力。Web组件提供了在网页中预览PDF的能力。应用可以通过Web组件的src参数和loadUrl()接口中传入PDF文件,来加载PDF文档。根据PDF文档来源不同,可以分为三种常用场景:加载网络PDF文档、加载本地PDF文档、加载应用内resource资源PDF文档。
效果预览
| 主页 |
|---|
![]() |
使用说明
- Web组件创建时指定默认加载的网络PDF文档example.com/test.pdf。
网页中安全区域计算和避让适配
介绍
CalcAdjustSafeArea
- 本工程主要实现了对指南文档网页中安全区域计算和避让适配中示例代码片段的工程化,主要目标是实现指南中示例代码需要与sample工程文件同源。
介绍
- 本示例主要介绍网页中安全区域计算和避让适配。Web组件提供了利用W3C CSS进行安全区域计算并避让适配的能力,用来支持异形屏幕设备在沉浸式效果下页面的正常显示。此时,网页开发者想对重叠元素进行避让,就可以该能力。ArkWeb内核将持续监测Web组件及系统安全区域的位置与尺寸,依据两者的重叠部分,计算出当前Web组件的安全区域,以及在各个方向上所需避让的具体距离。
具体实现
- 使用expandSafeArea设置Web组件自定义扩展安全区域,本次实现设置扩展安全区域类型为系统默认非安全区域(包括状态栏、导航栏),扩展安全区域边缘为上方区域与下方区域。示例参考:CalcAdjustSafeArea.ets
效果预览
| 主页 |
|---|
![]() |
使用说明
- 通过expandSafeArea来开启沉浸式效果。Web组件根据实际情况对网页元素进行相应的避让,防止与系统的非安全区域发生重叠遮挡。
工程目录
entry/src/main/
|---ets
|---|---entryability
|---|---|---EntryAbility.ets
|---|---pages
|---|---|---Index.ets // 首页
|---|---|---InitiatePrintAppAPI
|---|---|---InitiatePrintW3CAPI
|---|---|---PreviewPDF
|---|---|---CalcAdjustSafeArea
|---resources // 静态资源
|---ohosTest
|---|---ets
|---|---|---tests
|---|---|---|---Ability.test.ets // 自动化测试用例
相关权限
依赖
不涉及。
约束与限制
- 本示例仅支持标准系统上运行。
- 本示例支持API14版本SDK,SDK版本号(API Version 14 Release)。
- 本示例需要使用DevEco Studio 版本号(5.0.1Release)才可编译运行。
下载
如需单独下载本工程,执行如下命令:
git init
git config core.sparsecheckout true
echo ArkWeb/ProcessWebPageCont > .git/info/sparse-checkout
git remote add origin https://gitcode.com/openharmony/guide-snippets.git
git pull origin master



