• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用Web组件保存前端页面为PDF
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @zhang-yinglie-->
5<!--Designer: @handyohos-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9从API version 14开始，支持使用Web组件的[createPdf](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#createpdf14)方法，为应用提供了保存前端页面为PDF的功能。
10
11通过[createPdf](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#createpdf14)生成实例后，调用`pdfArrayBuffer`方法获取二进制数据流，再使用`fileIo`方法将二进制数据流保存为PDF文件。用户可以将前端页面内容保存为PDF以便分享或保存。例如，生成报告、发票等，方便用户保存和传输。
12
13## 需要权限
14若涉及网络文档获取，需在module.json5中配置网络访问权限。具体添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md#在配置文件中声明权限)。
15
16  ```
17  "requestPermissions":[
18      {
19        "name" : "ohos.permission.INTERNET"
20      }
21    ]
22  ```
23
24
25## callback方式保存PDF
26通过callback方式调用`createPdf`接口，获取到的result通过`pdfArrayBuffer`接口取得PDF二进制数据流，最后使用`fileIo`方法将二进制数据流保存为PDF文件。
27```ts
28import { fileIo as fs } from '@kit.CoreFileKit';
29import { webview } from '@kit.ArkWeb';
30import { BusinessError } from '@kit.BasicServicesKit';
31import { common } from '@kit.AbilityKit';
32
33
34@Entry
35@Component
36struct Index {
37  controller: webview.WebviewController = new webview.WebviewController();
38  pdfConfig: webview.PdfConfiguration = {
39    width: 8.27,
40    height: 11.69,
41    marginTop: 0,
42    marginBottom: 0,
43    marginRight: 0,
44    marginLeft: 0,
45    shouldPrintBackground: true
46  }
47
48
49  build() {
50    Column() {
51      Button('SavePDF')
52        .onClick(() => {
53          // 触发PDF生成，需要确保页面渲染完成，可使用onPageEnd事件监听
54          this.controller.createPdf(
55            this.pdfConfig,
56            (error, result: webview.PdfData) => {
57              try {
58                // 获取到的result通过`pdfArrayBuffer`接口取得PDF二进制数据流，最后使用`fileIo`方法将二进制数据流保存为PDF文件
59                let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
60                let filePath = context.filesDir + "/test.pdf";
61                let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
62                fs.write(file.fd, result.pdfArrayBuffer().buffer).then((writeLen: number) => {
63                  console.info("createPDF write data to file succeed and size is:" + writeLen);
64                }).catch((err: BusinessError) => {
65                  console.error("createPDF write data to file failed with error message: " + err.message +
66                    ", error code: " + err.code);
67                }).finally(() => {
68                  // 关闭file
69                  fs.closeSync(file);
70                });
71              } catch (resError) {
72                console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
73              }
74            });
75        })
76      Web({ src: "www.example.com", controller: this.controller })
77    }
78  }
79}
80```
81
82## Promise方式保存PDF
83通过Promise方式调用`createPdf`接口，获取到的result通过`pdfArrayBuffer`接口取得PDF二进制数据流，最后使用`fileIo`方法将二进制数据流保存为PDF文件。
84```ts
85import { fileIo as fs } from '@kit.CoreFileKit';
86import { webview } from '@kit.ArkWeb';
87import { BusinessError } from '@kit.BasicServicesKit';
88import { common } from '@kit.AbilityKit';
89
90
91@Entry
92@Component
93struct Index {
94  controller: webview.WebviewController = new webview.WebviewController();
95  pdfConfig: webview.PdfConfiguration = {
96    width: 8.27,
97    height: 11.69,
98    marginTop: 0,
99    marginBottom: 0,
100    marginRight: 0,
101    marginLeft: 0,
102    shouldPrintBackground: true
103  }
104
105
106  build() {
107    Column() {
108      Button('SavePDF')
109        .onClick(() => {
110          // 触发PDF生成，需要确保页面渲染完成，可使用onPageEnd事件监听
111          this.controller.createPdf(this.pdfConfig)
112            .then((result: webview.PdfData) => {
113              try {
114                // 获取到的result通过`pdfArrayBuffer`接口取得PDF二进制数据流，最后使用`fileIo`方法将二进制数据流保存为PDF文件
115                let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
116                let filePath = context.filesDir + "/test.pdf";
117                let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
118                fs.write(file.fd, result.pdfArrayBuffer().buffer).then((writeLen: number) => {
119                  console.info("createPDF write data to file succeed and size is:" + writeLen);
120                }).catch((err: BusinessError) => {
121                  console.error("createPDF write data to file failed with error message: " + err.message +
122                    ", error code: " + err.code);
123                }).finally(() => {
124                  // 关闭file
125                  fs.closeSync(file);
126                });
127              } catch (resError) {
128                console.error(`ErrorCode: ${(resError as BusinessError).code},  Message: ${(resError as BusinessError).message}`);
129              }
130            })
131        })
132      Web({ src: "www.example.com", controller: this.controller })
133    }
134  }
135}
136```