• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用Web组件打印前端页面
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @zhang-yinglie-->
5<!--Designer: @handyohos-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9Web组件打印html页面时可通过W3C标准协议接口和应用接口两种方式实现。
10
11使用打印功能前，请在module.json5中配置相关权限，添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md#在配置文件中声明权限)。
12
13  ```
14  "requestPermissions":[
15      {
16        "name" : "ohos.permission.PRINT"
17      }
18    ]
19  ```
20
21## 使用W3C标准协议接口拉起打印
22通过创建打印适配器，拉起打印应用，并对当前Web页面内容进行渲染，渲染后生成的PDF文件信息通过fd传递给打印框架。W3C标准协议接口window.print()方法用于打印当前页面或弹出打印对话框。该方法没有任何参数，只需要在JavaScript中调用即可。
23
24可通过前端css样式控制是否打印，例如@media print。再通过web加载该html页面的方式运行。
25
26- print.html页面代码。
27
28  示例一：
29
30  ```html
31  <!DOCTYPE html>
32  <html>
33
34  <head>
35      <meta charset="utf-8">
36      <title>printTest</title>
37      <style>
38          @media print {
39              h1 {
40                  display: none;
41              }
42          }
43      </style>
44  </head>
45
46  <body>
47      <div>
48          <h1><b>
49                  <p style="text-align: center;">This is a test page for printing</p>
50              </b>
51              <hr color="#00cc00" width="95%">
52          </h1>
53          <button class="Button Button--outline" onclick="window.print();">Print</button>
54          <p> content content content </p>
55          <div id="printableTable">
56              <table>
57                  <thead>
58                      <tr>
59                          <td>Thing</td>
60                          <td>Chairs</td>
61                      </tr>
62                  </thead>
63                  <tbody>
64                      <tr>
65                          <td>1</td>
66                          <td>blue</td>
67                      </tr>
68                      <tr>
69                          <td>2</td>
70                          <td>green</td>
71                      </tr>
72                  </tbody>
73              </table>
74          </div>
75          <p> content content content </p>
76          <p> content content content </p>
77      </div>
78  </body>
79  ```
80
81  示例二（iframe嵌套页面的方式）：
82
83
84  ```html
85  <!DOCTYPE html>
86  <html lang="en">
87  <head>
88      <meta charset="UTF-8">
89      <meta name="viewport" content="width=device-width, initial-scale=1.0">
90      <title>iframe嵌套页面打印</title>
91  </head>
92  <body>
93      <button id="printIframe">打印iframe嵌套页面</button>
94      <iframe id="contentIframe" hidden></iframe>
95
96      <script>
97          document.getElementById("printIframe").addEventListener("click", () => {
98              var ctIframe = document.getElementById("contentIframe");
99              if(!ctIframe.contentWindow || !ctIframe.contentWindow.document) {
100                console.error("iframe页面初始化失败");
101                return;
102              }
103              var ctIframeDoc = ctIframe.contentWindow.document;
104              ctIframeDoc.write("嵌套页面");
105              ctIframeDoc.close();
106              ctIframe.contentWindow.print();
107          });
108      </script>
109  </body>
110  </html>
111  ```
112
113- 应用侧代码。
114
115  ```ts
116  import { webview } from '@kit.ArkWeb';
117
118  @Entry
119  @Component
120  struct Index {
121    controller: webview.WebviewController = new webview.WebviewController();
122
123    build() {
124      Row() {
125        Column() {
126          Web({ src: $rawfile("print.html"), controller: this.controller })
127            .javaScriptAccess(true)
128        }
129        .width('100%')
130      }
131      .height('100%')
132    }
133  }
134  ```
135
136## 通过调用应用侧接口拉起打印
137应用侧通过调用[createWebPrintDocumentAdapter](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#createwebprintdocumentadapter11)创建打印适配器，通过将适配器传入打印的print接口调起打印。
138
139```ts
140// xxx.ets
141import { webview } from '@kit.ArkWeb';
142import { BusinessError, print } from '@kit.BasicServicesKit';
143
144@Entry
145@Component
146struct WebComponent {
147  controller: webview.WebviewController = new webview.WebviewController();
148
149  build() {
150    Column() {
151      Button('createWebPrintDocumentAdapter')
152        .onClick(() => {
153          try {
154            let webPrintDocadapter = this.controller.createWebPrintDocumentAdapter('example.pdf');
155            print.print('example_job_id', webPrintDocadapter, null, this.getUIContext().getHostContext());
156          } catch (error) {
157            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
158          }
159        })
160      Web({ src: 'www.example.com', controller: this.controller })
161    }
162  }
163}
164```