当前位置：首页 > 文章列表 > 文章 > 前端 > 如何使用 HTML 渲染器自动创建 PDF 文档

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

来源：dev.to 2024-10-22 17:54:57 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何使用 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();