如何使用 HTML 渲染器自动创建 PDF 文档

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何使用 HTML 渲染器自动创建 PDF 文档》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

自动化文档创建是许多 saas 产品的一项重要功能，无论是生成发票、报告还是证书。使用 html 渲染器，开发人员只需几行代码即可将动态 html 内容转换为高质量的 pdf 文档或 png 图像。在本指南中，我们将向您展示如何将 exoapi 的文档创建功能集成到您的 saas 产品中，从而节省时间和精力。

为什么要自动生成文档？

自动化文档创建使企业能够：

• 大规模生成一致、专业的文档。
• 通过自动执行发票或报告生成等重复性任务来节省时间。
• 通过消除手动文档创建来提高准确性，降低错误风险。
• 根据动态数据为客户提供定制文档（例如个性化报告）。

自动生成文档的用例

以下是一些文档自动化功能可以简化您的 saas 产品工作流程的实际示例：

• 发票系统：根据订单详细信息自动生成客户发票的 pdf。示例：客户下订单后，动态生成品牌发票 pdf 并通过电子邮件发送给他们。
• 报告仪表板：允许用户下载 pdf 格式的报告。示例：提供分析功能的 saas 产品可以让用户将数据导出为具有专业外观的 pdf 报告。
• 证书和徽章：为课程完成、活动或成就创建可下载的 png 证书或徽章。示例：电子学习平台可以在完成课程后自动为学生生成定制证书。
• 电子商务订单摘要：自动生成 pdf 或 png 格式的订单确认或发货标签。示例：下订单后，生成 pdf 格式的运输标签，准备打印。

让我们逐步了解如何使用 exoapi 的 html 渲染器设置自动文档生成。

先决条件：注册 exoapi

访问 exoapi 并注册帐户以获取您的 api 密钥。

1. 安装sdk：

npm install @flower-digital/exoapi-sdk

2. 创建exoapi实例：

在您的 javascript 或 node.js 应用程序中，使用您的 api 密钥初始化 exoapi：

import { exoapi } from "@flower-digital/exoapi-sdk";
const exoapi = new exoapi({ apikey: your_api_key });

基本 pdf 生成示例

现在，让我们看一个从 html 内容生成 pdf 的简单示例。以下代码片段展示了如何创建具有基本样式的 pdf 文档：

import { exoapi } from "@flower-digital/exoapi-sdk";
import fs from "fs";

const exoapi = new exoapi({ apikey: your_api_key });

async function htmlrenderer() {
  try {
    const res = await exoapi.htmlrenderer({
      html: '<p style="padding:8px;font-size:36px">hello <b style="color: green">world!</b></p>',
      format: "pdf",
    });
    fs.writefilesync("document.pdf", buffer.from(await res.arraybuffer()));
    console.log("pdf document generated successfully!");
  } catch (err) {
    console.error("error generating pdf:", err);
  }
}

htmlrenderer();

运作原理：

• htmlrenderer() 函数将 html 字符串发送到 exoapi，exoapi 对其进行处理并返回 pdf 文档。
• 我们使用 node.js 的 fs 模块将 pdf 保存在本地，将文件写入 document.pdf。
• 您可以根据应用程序的要求（例如，客户详细信息、订单摘要）将 html 字符串替换为动态内容或模板。

高级 pdf 定制

exoapi 提供了多种选项来自定义您的 pdf。您可以控制页面大小、边距、方向、页眉、页脚，甚至可以注入自定义 css 以实现精确的样式。

这是一个高级示例，展示如何自定义 pdf 输出：

async function generateadvancedpdf() {
  try {
    const res = await exoapi.htmlrenderer({
      html: '<p style="font-size:36px">hello <b>world!</b></p>',
      format: "pdf",
      title: "sample document",
      pagesize: "a4",
      margin: "10mm",
      landscape: true,
      css: `
        body {
          font-family: arial, sans-serif;
          font-size: 14px;
        }
        b {
          color: blue;
        }
      `,
      header: '<div style="background:grey; width:100%; height:30px; font-size:20px">page <span class="pagenumber"></span> of <span class="totalpages"></span></div>',
      footer: '<div style="background:grey; width:100%; height:30px; font-size:20px">page <span class="pagenumber"></span> of <span class="totalpages"></span></div>',
    });
    fs.writefilesync("advanced-document.pdf", buffer.from(await res.arraybuffer()));
    console.log("custom pdf document generated successfully!");
  } catch (err) {
    console.error("error generating custom pdf:", err);
  }
}

generateadvancedpdf();

关键参数：

• 标题：pdf文档的标题，将出现在元数据中。
• pagesize：定义 pdf 的大小（例如 a4、letter 等）。您还可以使用 pagewidth 和 pageheight 设置显式尺寸。
• margin：为文档设置统一的边距，或者使用margintop、marginleft等，进行更精细的控制。
• landscape：横向设置为 true，纵向设置为 false。
• css：可以添加自定义 css 来设置文档内容的样式。
• 页眉和页脚：您可以添加页眉和页脚以及页码、总页数和日期的占位符。

生成 png 图像

exoapi 还支持从 html 内容生成 png 图像。当您需要视觉输出（例如徽章、证书或视觉报告）时，这非常有用。以下是如何生成 png 图像的示例：

async function generatePNG() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="padding:8px;font-size:36px">Hello <b style="color: green">world!</b></p>',
      format: "png",
      imageWidth: 120,
      imageHeight: 120,
    });
    fs.writeFileSync("image.png", Buffer.from(await res.arrayBuffer()));
    console.log("PNG image generated successfully!");
  } catch (err) {
    console.error("Error generating PNG:", err);
  }
}

generatePNG();

自定义图像尺寸：

• imagewidth 和 imageheight 参数允许您指定 png 图像的大小（以像素为单位）。
• 如果未提供 imageheight，它将自动适应内容。

开始使用

exoapi 的 html 渲染器使 saas 产品中的文档创建变得异常简单且可定制。只需几行代码，您就可以自动生成 pdf 和图像，简化发票、报告和创建具有视觉吸引力的文档等流程。通过将 exoapi 集成到您的工作流程中，您可以增强应用程序的功能，同时节省手动文档创建任务的时间。

立即尝试 exoapi，了解它如何简化文档创建并提高 saas 应用程序的工作效率。查看官方 exoapi 文档以探索更多功能和自定义选项。

本篇关于《如何使用 HTML 渲染器自动创建 PDF 文档》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！