跳转到内容
Capgo

入门指南

  1. 安装插件

    Terminal window
    npm i @capgo/capacitor-pdf-generator

  2. 同步平台

    Terminal window
    npx cap sync

从 HTML 生成

Section titled “从 HTML 生成”
import { PdfGenerator } from '@capgo/capacitor-pdf-generator';


const receiptHtml = `
  <html>
    <body>
      <h1>Capgo Store</h1>
      <p>Thank you for your purchase.</p>
    </body>
  </html>
`;


const pdf = await PdfGenerator.fromData({
  data: receiptHtml,
  documentSize: 'A4',
  orientation: 'portrait',
  type: 'base64',
  fileName: 'receipt.pdf',
});


if (pdf.type === 'base64') {
  const link = document.createElement('a');
  link.href = `data:application/pdf;base64,${pdf.base64}`;
  link.download = 'receipt.pdf';
  link.click();
}

捕获远程 URL

Section titled “捕获远程 URL”
await PdfGenerator.fromURL({
  url: 'https://docs.capgo.app/invoice?id=123',
  orientation: 'landscape',
  documentSize: 'A4',
  type: 'share', // opens the native share dialog
  fileName: 'invoice-123.pdf',
});

提示

Section titled “提示”
  • 在 HTML 字符串中包含内联 CSS 或提供 baseUrl，以便正确解析相对资源。
  • 在移动设备上返回 base64 数据时，在共享之前将其移动到文件系统（例如，Capacitor Filesystem）。
  • landscape 方向适合宽表格，而 portrait 适合大多数文档。
  • 考虑使用作用域 CSS 字体（例如，系统字体）以在各平台上实现一致的渲染。