HarmonyOS Next开发学习手册——处理网页内容

最新推荐文章于 2024-11-01 09:19:41 发布

OpenHarmony_小贾

最新推荐文章于 2024-11-01 09:19:41 发布

阅读量1k

点赞数 14

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 学习华为鸿蒙开发前端 web组件移动开发

本文链接：https://blog.csdn.net/maniuT/article/details/140620371

版权

移动开发同时被 3 个专栏收录

955 篇文章 13 订阅

订阅专栏

HarmonyOS

871 篇文章 15 订阅

订阅专栏

鸿蒙开发

504 篇文章 2 订阅

订阅专栏

使用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 NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。