鸿蒙网络编程系列39-Web组件打印示例
lipiwang 2024-11-20 18:27 9 浏览 0 评论
1. web组件打印简介
web组件在加载了网页以后，有两种方式可以实现打印，第一种是在网页中调用W3C标准协议接口window.print()进行打印，这种方式比较简单方便，只要网页中触发了该方法即可打印，缺点是如果网页没有地方触发则不能打印；另外一种是在应用侧实现的，通过web控制器的createWebPrintDocumentAdapter方法创建打印适配器，然后将适配器传入打印的print接口即可调起打印，虽然有点复杂，但是可以打印任何网页；本文将分别演示这两种打印方式的实现。
2. web组件打印演示
本示例运行后的界面如图所示,这里的网页使用的是应用内置的html资源文件：
单击网页中的“打印”按钮，即可弹出打印页面如图所示：
页面的上部为打印预览，下部为打印配置。
如果不使用页面内的打印按钮，而是单击应用侧的“打印”按钮（确保不选中“打印背景”选项），则会弹出如下的打印页面：
这里的预览页面没有显示背景色，如果要打印背景色，可以选中“打印背景”选项。
3.web组件打印示例编写
下面详细介绍创建该示例的步骤。
步骤1：创建Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]这里添加了访问互联网的权限。
步骤3：添加print.html资源文件，该文件即为web组件加载的html文件，内容如下：
<!DOCTYPE html>
<html>
<body style="background-color: lightblue;">
<div style="text-align: center;">
<h1>
打印测试页
</h1>
<button onclick="window.print();">打印</button>
<p> 网页内容 </p>
<p style="color: blue;"> 打印Web组件中的网页内容示例 </p>
</div>
</body>步骤4：在Index.ets文件里添加如下的代码：
import web_webview from '@ohos.web.webview'
import { print } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
//是否打印背景
@State printBackground: boolean = false
scroller: Scroller = new Scroller()
controller: web_webview.WebviewController = new web_webview.WebviewController()
webPrintAdapter?: print.PrintDocumentAdapter
build() {
Row() {
Column() {
Text("Web组件打印")
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.Center }) {
Text("打印背景")
.fontSize(14)
Checkbox()
.select($this.printBackground)
.shape(CheckBoxShape.ROUNDED_SQUARE)
Button("打印")
.onClick(() => {
this.print()
})
.width(60)
.fontSize(14)
}
.width('100%')
.padding(5)
Scroll(this.scroller) {
Web({ src: $rawfile("print.html"), controller: this.controller })
.padding(10)
.width('100%')
.textZoomRatio(150)
.backgroundColor(0xeeeeee)
.javaScriptAccess(true)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.height('100%')
}
.height('100%')
}
//打印web组件内容
print() {
if (this.webPrintAdapter == undefined) {
this.webPrintAdapter = this.controller.createWebPrintDocumentAdapter("webPrint");
}
this.controller.setPrintBackground(this.printBackground)
print.print("printJob", this.webPrintAdapter, null, getContext())
.then((task: print.PrintTask) => {
task.on('succeed', () => {
console.log('打印成功！');
})
})
}
}步骤5：编译运行，建议使用真机。
步骤6：按照本节第2部分“web组件打印演示”操作即可。
4.代码分析
本示例代码较简单，需要注意的是网页内打印调用方法，即window.print()；另外一点是在应用侧打印时，注意不要多次创建打印适配器，本示例是通过判断打印适配器的变量是否为undefined实现的。
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/WebPrint
本系列源码地址：
相关推荐
- 《每日电讯报》研发数字工具，教你更有效率地报道新闻
-
为鼓励新闻编辑部持续创新，《每日电讯报》正在尝试有战略地研发数字工具。网站的数字媒体主任马尔科姆o科尔斯（MalcolmColes）表示，《每日电讯报》正试图去“创建一些可持续资产”，以便于让记者们...
- html5学得好不好，看掌握多少标签
-
html5你了解了多少？如果你还是入门阶段的话，或者还是一知半解的话，那么我们专门为你们收集的html5常用的标签大全对你就很有帮助了，你需要了解了html5有哪些标签你才能够更好的。驾驭html5...
- 前端分享-少年了解过iframe么（我想了解少年）
-
iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...
- 做SEO要知道什么是AJAX(人能看到但搜索引擎看不到的内容)
-
一个明显的，人能看到但搜索引擎不能看到的内容是AJAX。那么什么是AJAX呢？其实，了解过的基本上也都清楚，AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX最大的优点是在不重新加...
- 介绍最前沿的人工智能创新，‘无反向传播’神经网络训练方法?
-
图像由GoogleImageFX生成前言：本文整理自NoProp原始论文与实践代码，并结合多个公开实现细节进行了全流程复现。对神经网络训练机制的探索仍在不断演进，如果你也在研究反向传播之...
- 说说我们对HTML6的期许（对html的看法）
-
HTML5概述HTML5是HTML语言最受欢迎的版本之一，它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了article,section,header这样的标签来帮助开发者更好...
- 浏览器中在线预览pdf文件，pdf.mjs插件实现web预览pdf
-
背景：本来只是淘宝上卖卖袜子，想着扩展一下业务，准备做同名“来家居”海外袜子馆外贸项目，碰到pdf在线预览的需求，就找了pdf.js插件进行实践后把此方法记录下来，可以通过多种方法来实现，每种方法都有...
- SVG 在前端的7种使用方法，你还知道哪几种?
-
本文简介点赞+关注+收藏=学会了技术一直在演变，在网页中使用SVG的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的7种SVG的使用方法列举出来，有备无患~如果你还...
- HTML5常用标签大全（html5em标签）
-
HTML前端开发最终取决于掌握标签的多少HTML大概有七八百个标签楼主这里给大家总结了下HTML常用标签标签描述<!--...-->定义注释。<!DOCTYPE>定义文档类型...
- "伪君子Snoop Dogg!"... WHAT?| MetroDaily 24/7
-
TUE.01-新作品-虽说年纪大了会有点糊涂，但是最近SnoopDogg的这波操作实在是让粉丝们有点迷，甚至有人表示没想到他是这样的"伪君子"......而这一切都源于他近日在IG上Po出的一...
- 莎夏·班克斯盼望表哥Snoop Dogg为其作出场曲
-
NXT女子冠军莎夏·班克斯(SashaBanks)近日接受了迈阿密先驱报采访，访谈纪要如下：关于她出众的形象：“我一向喜欢与众不同。为了能让人眼前一亮，我的装束总是非常前卫、非常抢眼，这样才能让观众...
- 喜欢Snoop!全球第一间「史努比博物馆」海外分馆在东京!
-
1950年起，由美國漫畫家CharlesM.Schulz創作的作品《Snoopy》史努比，其鮮明的可愛角色與幽默的劇情內容，至今仍成為許多大朋友與小朋友心中的最愛。為了紀念作者所設立的全球首...
- Vetements 推出 Snoop Dogg 肖像「天价」T-Shirt
-
Vetements的CEOGuramGvasalia早前才透露品牌经营策略的秘密–Vetements如何成为人人热议的话题品牌。但似乎他仍有更多需要解释的东西–这个法国奢侈品牌最新...
- 狗爷Snoop Dogg的《I Wanna Thank Me》巡回演唱会旧金山站
-
西海岸匪帮说唱歌手SnoopDogg在《IWannaThankMe》巡回演唱会旧金山站表演（图片来自ICphoto）西海岸匪帮说唱歌手SnoopDogg（图片来自ICphoto）西海...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)