后端(NodeJS)- Adaptivecard JSON to HTML Parser

mrfwxfqh 于 2023-04-20 发布在 Node.js

关注(0)|答案(1)|浏览(107)

我想达到的目标

后端NodeJS服务，将接收自适应卡JSON请求并给予解析的HTML响应。
我为什么要写这个服务？
有一个要求，发送电子邮件给用户，我不想写一个单独的HTML模板的电子邮件时，我们已经有一吨的自适应卡JSON模板，可以重复使用。
我尝试了什么后台服务？
创建了一个nodejs服务
已安装的节点包：npm install adaptivecards
编写了一个示例程序来将JSON自适应卡解析为HTML。
我遇到的问题：
我遇到的第一个问题：**render（）**函数报告没有 document、window 和 HTMLElement。
为了解决上述问题，我安装了jsdom，并创建了一个DOM对象，并分配给global：

var jsdom = require("jsdom");
var JSDOM = jsdom.JSDOM;
var html = `<!DOCTYPE html>
    <html>
        <body id="cardAdaptive"></body>
    </html>
`;

const DOM = new JSDOM(html);
global.window = DOM.window;
global.document = DOM.window.document;
global.HTMLElement = DOM.window.HTMLElement;

*主要问题：程序运行正常，没有任何问题，但**解析的HTML是不完整的。**请参阅下面所附的图像。
解析器程序（parser.js）：

var jsdom = require("jsdom");
var JSDOM = jsdom.JSDOM;
var html = `<!DOCTYPE html>
    <html>
        <body id="cardAdaptive"></body>
    </html>
`;

const DOM = new JSDOM(html);
global.window = DOM.window;
global.document = DOM.window.document;
global.HTMLElement = DOM.window.HTMLElement;

var AdaptiveCards = require("adaptivecards");

var card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/adaptive-card-50.png"
        },
        {
            "type": "TextBlock",
            "text": "Hello **Adaptive Cards!**"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": "http://adaptivecards.io"
        },
        {
            "type": "Action.OpenUrl",
            "title": "GitHub",
            "url": "http://github.com/Microsoft/AdaptiveCards"
        }
    ]
};

// Create an AdaptiveCard instance
var adaptiveCard = new AdaptiveCards.AdaptiveCard();

// Set its hostConfig property unless you want to use the default Host Config
// Host Config defines the style and behavior of a card
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
    fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
    // More host config options
});

// Parse the card payload
adaptiveCard.parse(card);

// Render the card to an HTML element:
var renderedCard = adaptiveCard.render();

// And finally insert it somewhere in your page:
DOM.window.document.getElementById("cardAdaptive").appendChild(renderedCard);

// Print HTML string
console.log(DOM.serialize());

程序输出（HTML）：

<!DOCTYPE html>
<html>

<head></head>

<body id="cardAdaptive">

    <div class="ac-container ac-adaptiveCard"
        style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 15px 15px 15px 15px; margin: 0px 0px 0px 0px;"
        tabindex="0">
        <div
            style="display: flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;">
            <img style="max-height: 100%; min-width: 0; max-width: 100%;" class="ac-image"
                src="http://adaptivecards.io/content/adaptive-card-50.png"></div>
        <div class="ac-horizontal-separator"
            style="height: 8px; overflow: hidden; margin-right: 0px; margin-left: 0px; flex: 0 0 auto;"></div>
        <div class="ac-textBlock"
            style="overflow: hidden; font-family: Segoe UI, Helvetica Neue, sans-serif; font-size: 14px; color: rgb(51, 51, 51); font-weight: 400; text-align: left; line-height: 18.62px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;">
        </div>
        <div class="ac-horizontal-separator" style="height: 8px; overflow: hidden;"></div>
        <div>
            <div style="overflow: hidden;">
                <div class="ac-actionSet" style="display: flex; flex-direction: row; justify-content: flex-start;">
                    <button aria-label="Learn more" type="button"
                        style="display: flex; align-items: center; justify-content: center; flex: 0 1 auto;" role="link"
                        class="ac-pushButton style-default">
                        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"></div>
                    </button>
                    <div style="flex: 0 0 auto; width: 20px;"></div><button aria-label="GitHub" type="button"
                        style="display: flex; align-items: center; justify-content: center; flex: 0 1 auto;" role="link"
                        class="ac-pushButton style-default">
                        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"></div>
                    </button>
                </div>
            </div>
            <div></div>
        </div>
    </div>
</body>

</html>

解析后的HTML如下：

缺少文本字段和内容。

但期望的是这样的：

更新

我试着设置hostConfig，就像在这个stackoverflow answer和所有在this github中提到的示例主机配置一样。它们都不起作用。看起来有文本的字段总是丢失。现在我不知道如何使其工作。

我对该程序的规格：

Ubuntu 18.04.4 LTS
Nodejs：v12.18.1
“自适应卡”：“^1.2.6”，
“jsdom”：“^16.2.2”，
参考链接：
https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/render-a-card
https://github.com/microsoft/AdaptiveCards
https://github.com/microsoft/AdaptiveCards/tree/master/samples/HostConfig

node.js

来源：https://stackoverflow.com/questions/62465633/backend-nodejs-adaptivecard-json-to-html-parser

1条答案

按热度按时间

laik7k3q1#

自适应卡库将文本渲染为HtmlElement的innerText。jsdom不支持innerText，这就是文本全部消失的原因。
您可以像这样覆盖默认的TextBox渲染：

class CustomTextBox extends AdaptiveCards.TextBlock{
  overrideInternalRender() {
  var element = super.overrideInternalRender();
  element.textContent = element.innerText;

  return element;
  }
}

AdaptiveCards.GlobalRegistry.elements.register("TextBlock", CustomTextBox);

赞(0）回复(0）举报 2023-04-20

我来回答

后端(NodeJS)- Adaptivecard JSON to HTML Parser

1条答案

相关问题

热门标签

最新问答