自动化文档创建是许多 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 文档以探索更多功能和自定义选项。
