1# 使用Web组件打印前端页面
2
3Web组件打印html页面时可通过W3C标准协议接口和应用接口两种方式实现。
4
5使用打印功能前，请在module.json5中配置相关权限，添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。
6
7  ```
8  "requestPermissions":[
9      {
10        "name" : "ohos.permission.PRINT"
11      }
12    ]
13  ```
14
15## 使用W3C标准协议接口拉起打印
16通过创建打印适配器，拉起打印应用，并对当前Web页面内容进行渲染，渲染后生成的PDF文件信息通过fd传递给打印框架。W3C标准协议接口window.print()方法用于打印当前页面或弹出打印对话框。该方法没有任何参数，只需要在JavaScript中调用即可。
17
18可通过前端css样式控制是否打印，例如@media print。再通过web加载该html页面的方式运行。
19
20- print.html页面代码。
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- 应用侧代码。
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## 通过调用应用侧接口拉起打印。
97应用侧通过调用[createWebPrintDocumentAdapter](../reference/apis-arkweb/js-apis-webview.md#createwebprintdocumentadapter11)创建打印适配器，通过将适配器传入打印的print接口调起打印。
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```