Printing HTML Pages with Web Components in HarmonyOS Next
Overview
The Web component in HarmonyOS Next supports printing HTML pages through both W3C standard protocol interfaces and application interfaces.
Prerequisites
Before using the printing feature, ensure that the necessary permissions are configured in the module.json5 file. Add the following permission:
"requestPermissions": [
{
"name": "ohos.permission.PRINT"
}
]
For more information on declaring permissions in the configuration file, refer to the official documentation.
Using W3C Standard Protocol Interface for Printing
The W3C standard protocol interface allows you to initiate printing by creating a print adapter, launching the print application, and rendering the current Web page content. The rendered PDF file information is passed to the print framework via a file descriptor (fd). The window.print() method, which is part of the W3C standard protocol, is used to print the current page or display a print dialog. This method takes no parameters and can be called directly from JavaScript.
You can control what gets printed using frontend CSS styles, such as @media print. The HTML page can then be loaded and run in the Web component.
Frontend Page Code (print.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Print Test</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>
</html>
Application-Side Code
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%')
}
}
Using Application-Side Interface for Printing
The application-side interface allows you to initiate printing by creating a print adapter using the createWebPrintDocumentAdapter method and passing it to the print interface.
Application-Side Code
// 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('Create Print Adapter')
.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: 'https://www.example.com', controller: this.controller })
}
}
}
Top comments (0)