We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
GuidesApplication FrameworkArkWebProcessing Web Page ContentPrinting Frontend Pages

Printing Frontend Pages

Last updated: 2026-09-08 08:15
Content overview

The Web component can print HTML pages in two ways: through the W3C standard protocol API and through the app-side API.

Before using the print capability, declare related permissions in the module.json5 file. For details, see Declaring Permissions in the Configuration File.

Collapse
Word wrap
Dark theme
Copy code
  1. "requestPermissions":[
  2.     {
  3.       "name" : "ohos.permission.PRINT"
  4.     }
  5.   ]

Initiating a Print Task Through the W3C Standards-compliant API

A print adapter is created to start the print app and render the current web page content. The PDF file information generated after rendering is passed to the print framework through a file descriptor (fd). The W3C standard protocol API window.print() is used to print the current page or pop up a print dialog box. This method takes no parameters and only needs to be called in JavaScript.

You can use frontend CSS styles to control whether to print, for example, @media print. Then load the HTML page in the Web component.

  • Sample code of the print.html page:

    Example 1:

    Collapse
    Word wrap
    Dark theme
    Copy code
    1. <!DOCTYPE html>
    2. <html>
    3. 

    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>printTest</title>
    7.     <style>
    8.         @media print {
    9.             h1 {
    10.                 display: none;
    11.             }
    12.         }
    13.     </style>
    14. </head>
    15. 

    16. <body>
    17.     <div>
    18.         <h1><b>
    19.                 <p style="text-align: center;">This is a test page for printing</p>
    20.             </b>
    21.             <hr color="#00cc00" width="95%">
    22.         </h1>
    23.         <button class="Button Button--outline" onclick="window.print();">Print</button>
    24.         <p> content content content </p>
    25.         <div id="printableTable">
    26.             <table>
    27.                 <thead>
    28.                     <tr>
    29.                         <td>Thing</td>
    30.                         <td>Chairs</td>
    31.                     </tr>
    32.                 </thead>
    33.                 <tbody>
    34.                     <tr>
    35.                         <td>1</td>
    36.                         <td>blue</td>
    37.                     </tr>
    38.                     <tr>
    39.                         <td>2</td>
    40.                         <td>green</td>
    41.                     </tr>
    42.                 </tbody>
    43.             </table>
    44.         </div>
    45.         <p> content content content </p>
    46.         <p> content content content </p>
    47.     </div>
    48. </body>

    Example 2 (nesting a page in an iframe):

    Collapse
    Word wrap
    Dark theme
    Copy code
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Print Nested Page in an iframe</title>
    7. </head>
    8. <body>
    9.     <button id="printIframe">Print nested page in an iframe</button>
    10.     <iframe id="contentIframe" hidden></iframe>
    11. 

    12.     <script>
    13.         document.getElementById("printIframe").addEventListener("click", () => {
    14.             var ctIframe = document.getElementById("contentIframe");
    15.             if(!ctIframe.contentWindow || !ctIframe.contentWindow.document) {
    16.               console.error("Failed to initialize the iframe page");
    17.               return;
    18.             }
    19.             var ctIframeDoc = ctIframe.contentWindow.document;
    20.             ctIframeDoc.write("Nested page");
    21.             ctIframeDoc.close();
    22.             ctIframe.contentWindow.print();
    23.         });
    24.     </script>
    25. </body>
    26. </html>

  • Application code:

    Collapse
    Word wrap
    Dark theme
    Copy code
    1. import { webview } from '@kit.ArkWeb';
    2. 

    3. @Entry
    4. @Component
    5. struct Index {
    6.   controller: webview.WebviewController = new webview.WebviewController();
    7. 

    8.   build() {
    9.     Row() {
    10.       Column() {
    11.         Web({ src: $rawfile('print.html'), controller: this.controller })
    12.           .javaScriptAccess(true)
    13.       }
    14.       .width('100%')
    15.     }
    16.     .height('100%')
    17.   }
    18. }
    InitiatePrintW3CAPI.ets

Initiating a Print Task Through the Application API

On the application side, call createWebPrintDocumentAdapter to create a print adapter and pass the adapter to the print API to initiate printing.

Collapse
Word wrap
Dark theme
Copy code
  1. import { webview } from '@kit.ArkWeb';
  2. import { BusinessError, print } from '@kit.BasicServicesKit';
  3. 

  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: webview.WebviewController = new webview.WebviewController();
  8. 

  9.   build() {
  10.     Column() {
  11.       Button('createWebPrintDocumentAdapter')
  12.         .onClick(() => {
  13.           try {
  14.             let webPrintDocAdapter = this.controller.createWebPrintDocumentAdapter('example.pdf');
  15.             print.print('example_job_id', webPrintDocAdapter, null, this.getUIContext().getHostContext());
  16.           } catch (error) {
  17.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  18.           }
  19.         })
  20.       Web({ src: 'www.example.com', controller: this.controller });
  21.     }
  22.   }
  23. }
InitiatePrintAppAPI.ets
Processing Web Page Content
Saving a Frontend Page as a PDF File
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice
Search in Guides
Enter a keyword.