如何在 OrgChartJS by Balkan 中应用自定义编辑表单的导出 Pdf 选项

Question

我已经使用 Balkan 的 OrgChartJS 制作了自定义编辑表单，但我现在无法以 pdf 格式导出该编辑表单。有人可以帮忙吗？

这是我的JS文件：

var chart;
    fetch('url', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ rootId: rootNodeId })
    })
        .then(response => response.json())
    .then(data => {
        var myNodes = data.d;
        console.log(myNodes);

        OrgChart.scroll.smooth = 8;
        OrgChart.scroll.speed = 12;

        OrgChart.templates.ana.field_0 = '<text class="field_0 style="font-size:20px !important; font-family=verdana, Arial !important;" fill="#ffffff" x="120" y="30" text-anchor="middle">{val}</text>';
        OrgChart.templates.ana.field_1 = '<text class="field_1 style="font-size:14px;font-family=verdana, Arial !important;" fill="#ffffff" x="120" y="50" text-anchor="middle">{val}</text>';
        OrgChart.templates.ana.field_2 = '<text class="field_2 style="font-size:14px;font-family=verdana, Arial !important;" fill="#ffffff" x="150" y="80" text-anchor="middle">DOJ: {val}</text>';
        OrgChart.templates.ana.field_3 = '<text class="field_3 style="font-size:14px;font-family=verdana, Arial !important;" fill="#ffffff" x="150" y="100" text-anchor="middle">Division: {val}</text>';
        OrgChart.templates.ana.img_0 = '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="-10" y="65" width="60" height="60"></image>';

        var editForm = function () {
            this.nodeId = null;
        };

        editForm.prototype.init = function (obj) {
            var that = this;
            this.obj = obj;
            this.editForm = document.getElementById("editForm");
            this.nameInput = document.getElementById("Name");
            this.titleInput = document.getElementById("Designation");
            this.imgInput = document.getElementById("Photo");
            this.dojInput = document.getElementById("DOJ");
            this.divisionInput = document.getElementById("Division");

            this.cancelButton = document.getElementById("close");

            this.cancelButton.addEventListener("click", function () {
                that.hide();
            });
        };

        editForm.prototype.show = function (nodeId) {
            this.nodeId = nodeId;

            var left = document.body.offsetWidth / 2 - 150;

            this.editForm.style.left = left + "px";
            var node = chart.get(nodeId);
            if (!node) return;
            this.imgInput.src = node.Photo ? node.Photo : "#";
            this.nameInput.innerHTML = node.Name ? node.Name : "";
            this.titleInput.textContent = node.Designation ? node.Designation : "";
            this.dojInput.textContent = node.DOJ ? node.DOJ : "";
            this.divisionInput.textContent = node.Division ? node.Division : "";
            this.editForm.style.display = "flex";
            this.editForm.style.minHeight = "70vh";
            this.editForm.style.background = "transparent";
            

            OrgChart.animate(this.editForm, {
                opacity: 0
            }, {
                opacity: 1
            }, 300, OrgChart.anim.inOutSin);
        };

        editForm.prototype.hide = function (showldUpdateTheNode) {
            this.editForm.style.display = "none";
            this.editForm.style.opacity = 0;

        };

        OrgChart.miniMap.opacity = 0.8;
        OrgChart.miniMap.border = '2px solid #039BE5';
        OrgChart.miniMap.width = 80;
        OrgChart.miniMap.height = 75;
        OrgChart.miniMap.padding = 10;
        OrgChart.miniMap.top = '15px';
        OrgChart.miniMap.position = {
            top: 'padding',
            left: 'padding',
            right: 'undefined',
            bottom: 'undefined'
        };

        // ***************************************************************************
        chart = new OrgChart(document.getElementById('tree'), {
            lazyLoading:false,
            miniMap: true,
            mouseScrool: OrgChart.none,
            mouseScrool: OrgChart.action.scroll,
            padding: 70,
            enableSearch: true,
            layout: OrgChart.tree,
            align: OrgChart.ORIENTATION,
            toolbar: {
                layout: true,
                zoom: true,
                fit: true,
                expandAll: true,
                fullScreen:true
            },
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24,24,"#7A7A7A"),
                    onClick: pdf
                },
                pdfPreview: {
                    text: "PDF Preview",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: preview
                }
            },
            nodeBinding: {
                field_0: "Name",
                field_1: "Designation",
                field_2: "DOJ",
                field_3: "Division",
                img_0: "Photo"
            },
            editUI: new editForm(),
            nodes: myNodes
            
        });

这是我的 ASPX 文件：

<div id="editForm" style="
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-50px;
        display:none;
        opacity:0;
        text-align:center;
        border: transparent;
        width:300px;
        background-color:#fff;
        z-index: 10000;
        border-radius:15px;
        filter:drop-shadow(5px 5px 5px #909090);
        ">
        <div class="card">
            <div class="imgBx">
                <img id="Photo" src="" />
            </div>
            <div class="content">
                <span id="close">X</span>
                <div class="details">
                    <h3 id="Name">Name</h3>
                    <h3 id="Designation">Designation</h3>
                    <div class="data">
                        <h4 id="DOJ"></h4><br /> <div class="span">Date Of Joining</div>
                        <h4 id="Division"></h4><br /> <div class="span">Division</div>
                    </div>
                </div>
            </div>
            
        </div>
        
        
    </div>

    <div id="tree" class="chart-container"></div>

导出 pdf 选项存在于默认编辑表单中，但现在我无法理解如何为自定义编辑表单（包含 html、css 和图像）应用导出 pdf 选项。

Answer 1

你可以这样做： 以 HTML 形式添加此内容

<a href="#">Save as PDF</a>

JS 中的这个：

document.getElementById('editForm').addEventListener('click', function (e) {
e.preventDefault();
chart.exportPDFProfile({
    id: chart.editUI.nodeId,
});
chart.editUI.hide();

}）