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