1# Printing Frontend Pages
2
3With the **Web** component, you can print HTML pages through W3C standards-compliant APIs or application APIs.
4
5To start off, declare related permissions in the **module.json5** file. For details, see [Declaring Permissions](../security/AccessToken/declare-permissions.md).
6
7  ```
8  "requestPermissions":[
9      {
10        "name" : "ohos.permission.PRINT"
11      }
12    ]
13  ```
14
15## Initiating a Print Task Through the W3C Standards-compliant API
16The printing process with W3C is as follows: A print adapter is created, the print application is started, the current web page content is rendered, and the PDF file generated after rendering is transferred to the print framework through the file descriptor (FD). Use the **window.print()** method to print the current document or open the print dialog box. This method does not have any parameter; simply call it in JavaScript.
17
18You can use the frontend CSS styles, for example, **@media print**, to control the printed content. Then load the HTML page in the **Web** component.
19
20- Sample code of the **print.html** page:
21
22  ```html
23  <!DOCTYPE html>
24  <html>
25
26  <head>
27      <meta charset="utf-8">
28      <title>printTest</title>
29      <style>
30          @media print {
31              h1 {
32                  display: none;
33              }
34          }
35      </style>
36  </head>
37
38  <body>
39      <div>
40          <h1><b>
41                  <center>This is a test page for printing</center>
42              </b>
43              <hr color=#00cc00 width=95%>
44          </h1>
45          <button class="Button Button--outline" onclick="window.print();">Print</button>
46          <p> content content content </p>
47          <div id="printableTable">
48              <table>
49                  <thead>
50                      <tr>
51                          <td>Thing</td>
52                          <td>Chairs</td>
53                      </tr>
54                  </thead>
55                  <tbody>
56                      <tr>
57                          <td>1</td>
58                          <td>blue</td>
59                      </tr>
60                      <tr>
61                          <td>2</td>
62                          <td>green</td>
63                      </tr>
64                  </tbody>
65              </table>
66          </div>
67          <p> content content content </p>
68          <p> content content content </p>
69      </div>
70  </body>
71  ```
72
73- Application code:
74
75  ```ts
76  import { webview } from '@kit.ArkWeb';
77
78  @Entry
79  @Component
80  struct Index {
81    controller: webview.WebviewController = new webview.WebviewController();
82
83    build() {
84      Row() {
85        Column() {
86          Web({ src: $rawfile("print.html"), controller: this.controller })
87            .javaScriptAccess(true)
88        }
89        .width('100%')
90      }
91      .height('100%')
92    }
93  }
94  ```
95
96## Initiating a Print Task Through the Application API
97On the application side, call [createWebPrintDocumentAdapter](../reference/apis-arkweb/js-apis-webview.md#createwebprintdocumentadapter11) to create a print adapter and pass the adapter to the **print** API to initiate printing.
98
99```ts
100// xxx.ets
101import { webview } from '@kit.ArkWeb';
102import { BusinessError } from '@kit.BasicServicesKit';
103import { print } from '@kit.BasicServicesKit'
104
105@Entry
106@Component
107struct WebComponent {
108  controller: webview.WebviewController = new webview.WebviewController();
109
110  build() {
111    Column() {
112      Button('createWebPrintDocumentAdapter')
113        .onClick(() => {
114          try {
115            let webPrintDocadapter = this.controller.createWebPrintDocumentAdapter('example.pdf');
116            print.print('example_jobid', webPrintDocadapter, null, getContext());
117          } catch (error) {
118            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
119          }
120        })
121      Web({ src: 'www.example.com', controller: this.controller })
122    }
123  }
124}
125```
126