# 使用Web组件打印前端页面 Web组件打印HTML页面时可通过W3C标准协议接口和应用接口两种方式实现。使用打印功能前，请在module.json5中配置相关权限，添加方法请参考[在配置文件中声明权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/declare-permissions#在配置文件中声明权限)。 ``` "requestPermissions":[ { "name" : "ohos.permission.PRINT" } ] ``` #### 使用W3C标准协议接口拉起打印通过创建打印适配器，拉起打印应用，并对当前Web页面内容进行渲染，渲染后生成的PDF文件信息通过文件描述符（fd）传递给打印框架。W3C标准协议接口window.print()方法用于打印当前页面或弹出打印对话框。该方法没有任何参数，只需要在JavaScript中调用即可。可通过前端CSS样式控制是否打印，例如@media print。再通过Web加载该HTML页面的方式运行。 * print.html页面代码。示例一： ``` printTest

This is a test page for printing

content content content

Thing	Chairs
1	blue
2	green

content content content

``` 示例二（iframe嵌套页面的方式）： ``` iframe嵌套页面打印 ``` * 应用侧代码。 ``` import { webview } from '@kit.ArkWeb'; @Entry @Component struct Index { controller: webview.WebviewController = new webview.WebviewController(); build() { Row() { Column() { Web({ src: $rawfile('print.html'), controller: this.controller }) .javaScriptAccess(true) } .width('100%') } .height('100%') } } ``` #### 通过调用应用侧接口拉起打印应用侧通过调用[createWebPrintDocumentAdapter](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#createwebprintdocumentadapter11)创建打印适配器，通过将适配器传入打印的print接口调起打印。 ``` import { webview } from '@kit.ArkWeb'; import { BusinessError, print } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('createWebPrintDocumentAdapter') .onClick(() => { try { let webPrintDocAdapter = this.controller.createWebPrintDocumentAdapter('example.pdf'); print.print('example_job_id', webPrintDocAdapter, null, this.getUIContext().getHostContext()); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }); } } } ```