📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

使用Web组件打印前端页面

Web组件打印html页面时可通过W3C标准协议接口和应用接口两种方式实现。开发者在使用该能力时，需配置 ohos.permission.PRINT 打印权限。

使用W3C标准协议接口拉起打印

通过创建打印适配器，拉起打印应用，并对当前Web页面内容进行渲染，渲染后生成的PDF文件信息通过fd传递给打印框架。W3C标准协议接口window.print()方法用于打印当前页面或弹出打印对话框。该方法没有任何参数，只需要在JavaScript中调用即可。

可通过前端css样式控制是否打印，例如@media print。再通过web加载该html页面的方式运行。

  • print.html页面代码。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>printTest</title>
    <style>
        @media print {
            h1 {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1><b>
                <center>This is a test page for printing</center>
            </b>
            <hr color=#00cc00 width=95%>
        </h1>
        <button class="Button Button--outline" onclick="window.print();">Print</button>
        <p> content content content </p>
        <div id="printableTable">
            <table>
                <thead>
                    <tr>
                        <td>Thing</td>
                        <td>Chairs</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>blue</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>green</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p> content content content </p>
        <p> content content content </p>
    </div>
</body>
  • 应用侧代码。
import { webview } from '@kit.ArkWeb';

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

  build() {
    Row() {
      Column() {
        Web({ src: $rawfile("print.html"), controller: this.controller })
          .javaScriptAccess(true)
      }
      .width('100%')
    }
    .height('100%')
  }
}

通过调用应用侧接口拉起打印。

应用侧通过调用 createWebPrintDocumentAdapter 创建打印适配器，通过将适配器传入打印的print接口调起打印。

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

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

  build() {
    Column() {
      Button('createWebPrintDocumentAdapter')
        .onClick(() => {
          try {
            let webPrintDocadapter = this.controller.createWebPrintDocumentAdapter('example.pdf');
            print.print('example_jobid', webPrintDocadapter, null, getContext());
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

使用Web组件的PDF文档预览能力

Web组件提供了在网页中预览PDF的能力。应用可以通过Web组件的 src 参数和 loadUrl() 接口中传入PDF文件，来加载PDF文档。根据PDF文档来源不同，可以分为三种常用场景：加载网络PDF文档、加载本地PDF文档、加载应用内resource资源PDF文档。

PDF文档预览加载过程中，若涉及网络文档获取，需要配置 ohos.permission.INTERNET 网络访问权限。

在下面的示例中，Web组件创建时指定默认加载的网络PDF文档 www.example.com/test.pdf，该地址为示例，使用时需替换为真实可访问地址:

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

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

  build() {
    Column() {
      Web({ 
          src: 
          "https://www.example.com/test.pdf",                     // 方式一 加载网络PDF文档
          // "file://" + getContext(this).filesDir + "/test.pdf", // 方式二 加载本地应用沙箱内PDF文档
          // "resource://rawfile/test.pdf",                         // 方式三 应用内resource资源PDF文档
          // $rawfile('test.pdf'),                                 // 方式四 应用内resource资源PDF文档
          controller: this.controller 
      })
        .domStorageAccess(true)
    }
  }
}

上述示例中，由于PDF预览页面对于侧边导航栏是否展开会根据用户操作使用window.localStorage进行持久化记录，所以需开启文档对象模型存储 domStorageAccess 权限:

Web().domStorageAccesss(true)

在Web组件创建时，指定默认加载的PDF文档。在默认PDF文档加载完成后，如果需要变更此Web组件显示的PDF文档，可以通过调用 loadUrl() 接口加载指定的PDF文档。Web组件 的第一个参数变量src不能通过状态变量（例如：@State）动态更改地址，如需更改，请通过 loadUrl() 重新加载。

同时包含三种PDF文档加载预览场景:

  • 预览加载网络PDF文件
Web({ 
  src: "https://www.example.com/test.pdf",
  controller: this.controller 
})
  .domStorageAccess(true)
  • 预览加载应用沙箱内PDF文件
Web({ 
  src: "file://" + getContext(this).filesDir + "/test.pdf",
  controller: this.controller 
})
  .domStorageAccess(true)
  • 预览加载应用内PDF资源文件，有两种使用形式。$rawfile(‘test.pdf’)形式无法指定下面介绍的预览参数。
Web({ 
  src: "resource://rawfile/test.pdf", // 或 $rawfile('test.pdf')
  controller: this.controller 
})
  .domStorageAccess(true)

此外，通过配置PDF文件预览参数，可以控制打开预览时页面状态。

当前支持如下参数:

语法 描述
nameddest=destination 指定PDF文档中的命名目标
page=pagenum 使用整数指定文档中的页码，文档第一页的pagenum值为1。
zoom=scale zoom=scale,left,top 使用浮点或整数值设置缩放和滚动系数。 例如：缩放值100表示缩放值为100%。 向左和向上滚动值位于坐标系中，0,0 表示可见页面的左上角，无论文档如何旋转。
toolbar=1 或 0 打开或关闭顶部工具栏。
navpanes=1 或 0 打开或关闭侧边导航窗格。

URL示例:

https://example.com/test.pdf#Chapter6  
https://example.com/test.pdf#page=3  
https://example.com/test.pdf#zoom=50  
https://example.com/test.pdf#page=3&zoom=200,250,100  
https://example.com/test.pdf#toolbar=0  
https://example.com/test.pdf#navpanes=0

# harmonyos # 前端 # 移动开发 # ArkUI
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区