HarmonyOS 鸿蒙Next中自定义组件转pdf

【背景知识】

• createDocument：创建空白文档。
• insertBlankPage：在指定位置插入PDF页。
• addImageObject：在PDF文档的页面中添加图片。
• saveDocument：保存文档。

【解决方案】

自定义组件没有直接转为PDF文档的方法，但是可以使用组件截图将自定义组件截图为图片，然后可以将图片添加到PDF文档中。

示例代码如下:

import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
import { fileUri } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs';
import { pdfService } from '@kit.PDFKit';


@Entry
@Component
struct Index {
  @State pixmap: image.PixelMap | undefined = undefined

  build() {
    Column() {
      Row() {
        Image(this.pixmap).width(100).height(100).border({ color: Color.Black, width: 2 })
      }
      HelloComponent({ messageID: 'root' });
      Button("组件截图并保存图片到沙箱路径")
        .onClick(async () => {
          try {
            let pixelmap = componentSnapshot.getSync("root", { scale: 2, waitUntilRenderFinished: true })
            this.pixmap = pixelmap
            const imagePacker = image.createImagePacker();
            const imageBuffer = await imagePacker.packToData(this.pixmap, {
              format: 'image/png',
              quality: 100
            });
            const newFileName = "HelloComponent.png"
            const newFilePath = this.getUIContext().getHostContext()?.cacheDir + "/" + newFileName;
            const newFileUri = fileUri.getUriFromPath(newFilePath);
            let file: fs.File = await fs.open(newFileUri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
            await fs.write(file.fd, imageBuffer);
            await fs.close(file);
            console.info("文件路径：" + newFileUri);
          } catch (error) {
            console.error("getSync errorCode: " + error.code + " message: " + error.message)
          }
        }).margin(10)
      Button('图片转PDF')
        .onClick(() => {
          let pngPath: string = this.getUIContext().getHostContext()?.cacheDir  + "/HelloComponent.png";
          // 创建 PDF 文档对象
          const pdfDoc = new pdfService.PdfDocument();
          // 创建PDF页面（匹配图片尺寸）
          pdfDoc.createDocument(this.pixmap?.getImageInfoSync().size.width, this.pixmap?.getImageInfoSync().size.height)
          // 创建一页 PDF（宽高同 PNG 图像）
          const page = pdfDoc.getPage(0);
          page.addImageObject(pngPath, 0, 0, page.getWidth(), page.getHeight());
          const newFileName = "HelloComponent.pdf"
          pdfDoc.saveDocument(this.getUIContext().getHostContext()?.cacheDir + "/" + newFileName);
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}
@Component
struct HelloComponent {
  @State messageID: string = '';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Image($r('app.media.background'))
        .autoResize(true)
        .width(100)
        .height(100)
    }
    .width(100)
    .height(100)
    .id(this.messageID)
  }
}