javascript - 当我使用 html2canvas 导出甘特仪表板时，为什么我的 PowerPoint 演示文稿是空白的？

Question

我使用 Web 技术创建了一个自定义甘特图仪表板。我还使用html2canvas.

虽然它曾经在以前版本的 Chrome 中工作，但在最新版本中却不行。将仪表板导出到 PowerPoint 时，我得到一个空白演示文稿。

exportPPT当我单击“导出”按钮时，我正在从 HTML 页面调用该函数。

这是我的代码：

let callDownloadPPT = function (pngUrl) {
    $('#p_loader').show();

    let property = {
        name: "Project name",
        heading: "",
        subheading: ""
    };

    Service.downloadPPT(pngUrl, property)
        .then(function successCallback(response) {
            if (response &&
                response.data &&
                response.data.status === "success" &&
                response.data.variable &&
                response.data.variable.row.column) {
                $scope.downloadUrl = $sce.trustAsResourceUrl(response.data.variable.row.column);

                let _template = '<iframe id="exportIframe" src="' + $scope.downloadUrl + '" style="display: none; visibility: hidden; width: 1px; height: 1px;"></iframe>';
                angular.element(document.getElementById('downloadIframe')).append($compile(_template)($scope));
            }

            $('#p_loader').hide();

        }, function errorCallback(error) {
            $('#p_loader').hide();
        });
};


$scope.exportPPT = function () {
    $(document).ready(function () {
        // Check if document width is higher than window width :)
        if ($(document).width() <= $(window).width()) {
            document.getElementById('downloadIframe').innerHTML = "";
            $('#p_loader').show();

            html2canvas($("#gantt-chart-full"), {
                allowTaint: true,
                onrendered: function (canvas) {
                    var myImage = canvas.toDataURL("img/png");
                    let base64String = /,(.+)/.exec(myImage)[1];
                    callDownloadPPT(base64String);
                }
            });
        } else {
            document.getElementById('downloadIframe').innerHTML = "";
            $('#p_loader').show();
            html2canvas($("#gantt-chart-full"), {
                height: $("#gantt-chart-full").get(0).scrollHeight,
                width: $("#gantt-chart-full").get(0).scrollWidth,
                logging: true
            }).then(function (canvas) {
                var myImage = canvas.toDataURL("img/png");
                let base64String = /,(.+)/.exec(myImage)[1];
                callDownloadPPT(base64String);
            });
        }
    });
};

如何使 PowerPoint 不为空白？

标签： javascripthtmlcssangularjsgoogle-chrome