javascript怎么实现使用动态图像生成文档

这篇文章主要为大家展示了“javascript怎么实现使用动态图像生成文档”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“javascript怎么实现使用动态图像生成文档”这篇文章吧。Adobe Document Generation最吸引人的方面之一是它非常灵活。API 可以真正增强最终结果的一个方面是能够在模板中包含图像。在典型的用例中，您将提供在与 API 一起使用的数据中定义的静态图像。在这篇博文中，我将展示一个更高级的例子——动态生成图像，在我们的例子中是动态生成图表。
在我们进入更高级的演示之前，让我们快速介绍一下基础知识。（我的同事非常深入地研究了文档生成和图像，您也应该检查一下。）正如我们的文档所述，在 Word 模板中使用动态图像需要几个步骤。首先，您将图像添加到文档中。您选择什么图像并不重要，它只是一个占位符，但您需要根据需要将其放置在文档中，并确保已按预期调整其大小。完成后，右键单击图像并选择“编辑替换文字”选项。在该替代文本中，您提供 JSON：JSON：该location-path属性必须指向包含图像数据的数据中使用的键值。例如，给定上述location-path值，我与 API 一起使用的数据可能如下所示：
JSON:如示例所示，图像数据必须是图像的 Base64 编码版本。如果你以前从未见过，它看起来有点像这样：
数据：图像/png；base64，一个非常长的字符列表您还可以使用 Word Add On 为您插入图像。如果您添加的示例数据包含 Base64 值，则您可以在“高级”选项卡的“图像”部分中选择它。
所以此时，您已经能够动态更改最终结果 PDF 或 Word 文档中的图像。为此，您需要换出值。想象一下，对于文档中的图像，您有两个选项，一张猫的图片或一张狗的图片。在 Word 模板中，您嵌入了一个占位符图像并将其链接到一个值pet.在将您的模板和数据发送到 Document Generation API 之前，您将使用正确的值：如您所见，根据某些特定的布尔值，数据将具有猫或狗图片的编码版本。（显然一个比另一个好，当然我说的是猫。）虽然这符合动态，但我们可以更进一步。对于我们的场景，我们将创建一个文档，描述过去六个月收容所中猫的数量。这些数据是从内部报告系统返回的，可以这样表示：JSON:数据由从最旧到最新排序的值数组组成。数组中的每个项目都有一个日期戳和一个数字金额。让我们从一个包含数据表的模板开始。

就其本身而言，它既漂亮又简单，并且输出干净。这是生成 PDF 时的样子：

它“有效”，但图表可以使它更容易阅读。您可以更清楚地看到一段时间内的趋势，并根据提供的数据做出更好的判断。但是我们如何在 Word 模板中获取动态图表呢？首先，我们需要找到一个可以同时创建图表的服务，这是至关重要的部分，让我们可以访问图表的原始图像数据。你看，有大约一千种图表服务，专门为网络开发人员服务。然而，许多这些图表库将在浏览器环境中以及在查看特定网页的 JavaScript 时呈现它们的库。我们需要的是一种创建实际图像的服务，该图像可以通过我们的服务器端代码请求并转换为 Base64。对于我们的演示，我们将使用QuickChart。QuickChart 是围绕开源Chart.js包的“服务包装器”。它基本上采用了 Chart.js 的功能，并允许您通过制作 URL 来获取图表的静态图像。例如，考虑这个 URL：https://quickchart.io/chart?c={type:’bar’,data:{labels:[‘Q1′,’Q2′,’Q3′,’Q4’]免费云主机域名,datasets:[{label:’Users’,data:[50,60,70,180]},{label:’Revenue’,data:[100,200,300,400]}]}}您可以看到定义图表各个方面的 URL 参数，包括类型 (bar)、标签和实际数据。你可以在这里看到结果：

虽然 URL 有点复杂（甚至可能更复杂），但它为我们的问题提供了解决方案。鉴于我们拥有来自内部 API 的数据，我们所要做的就是在适用于 QuickChart 的 URL 中“重写”它。我先建了那个。它接受我的有序数据并使用它在 QuickChart 上创建一个 URL，该 URL 使用折线图格式并指定特定的高度和宽度。这是那个函数：如果我想添加更多图表功能，比如自定义颜色，我会在这里修改。完成后，我在 Word 文档中添加了一个占位符图像并指定了大小。Ben 在他的精彩文章Adobe 文档生成 API：处理图像中将此作为技巧 6 进行了介绍。我要添加到此建议中的一件事是将 Word 切换为对图像使用像素高度和宽度而不是英寸。在 Word 设置中的高级下，转到显示并启用“显示 HTML 功能的像素”：
启用此功能后，我们可以为图像设置特定的高度和宽度（500 x 300）并将其居中放置在表格下方。

图片的替代文字如下所示：
提醒一下，这意味着当我们将数据传递给文档生成 API 时，它会期望image密钥包含我们图像的 Base64 数据。我们怎么做？还有一个功能！
JSON:该urlToBase64函数完全符合它的要求 – 访问远程 URL，获取数据，然后对其进行转换。现在我们拥有了我们需要的所有部分，让我们看一个完整的例子：从顶部开始，我首先为我的输入、数据和输出指定变量。在这种情况下，我的 cat 数据是一个硬编码的 JSON 文件，如上所示。然后我调用generateQuickChatURL我的数据并将结果分配给image值。最后，这将传递给generateFromTemplate使用我们的 SDK 创建 PDF的实用程序函数 ()。以上是“javascript怎么实现使用动态图像生成文档”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注百云主机行业资讯频道！

相关推荐: 怎么用Java实现顺序表

这篇文章给大家分享的是有关怎么用Java实现顺序表的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。顺序表就是按照顺序存储方式存储的线性表，该线性表的结点按照逻辑次序依次存放在计算机的一组连续的存储单元中。由于顺序表是依次存放的，只要知…