使用 printThis 时，LeafletJS 中的地图容器已初始化

Question

我正在使用 printThis 从应用程序的页面中打印一堆元素。

我遇到以下错误：

leaflet.js:5 Uncaught Error: Map container is already initialized.
at e._initContainer (leaflet.js:5:31752)
at e.initialize (leaflet.js:5:20608)
at new e (leaflet.js:5:2745)
at o.map (leaflet.js:6:8323)
at initLeafletMap (JsCombinerV22023702496814.ashx?jsLocal=true:57688:22)
at StatisticMapControl.LoadLeafletMap (JsCombinerV22023702496814.ashx?jsLocal=true:57375:24)
at eval (eval at <anonymous> (jquery.min.js:2:14136), <anonymous>:2:36)
at eval (<anonymous>)
at jquery.min.js:2:14136
at Function.globalEval (jquery.min.js:2:14147)

但这仅在我加载应用程序页面时第一次单击“打印”时发生。如果加载后，我浏览不同的菜单并尝试在这些菜单中打印，则不会出现任何错误。如果我返回默认页面，我也不会收到任何错误。

错误发生在传单文件（来自图书馆）

_initContainer: function(t) {
            var e = this._container = o.DomUtil.get(t);
            if (!e)
                throw new Error("Map container not found.");
            if (e._leaflet_id)
                throw new Error("Map container is already initialized.");
            o.DomEvent.addListener(e, "scroll", this._onScroll, this),
            this._containerId = o.Util.stamp(e)
        },

当我调用它时：

function initLeafletMap(mapContainerId) {
return L.map(mapContainerId, { zoomControl: false, tap: false, zoomSnap: 0 });
};

调用它后，传单内运行的部分代码是这样的：

o.Class.extend = function(t) {
var e = function() {
this.initialize && this.initialize.apply(this, arguments),
this.callInitHooks()
}

貌似调用了两次initialize，又调用了initContainer，出现了地图容器已经初始化的异常。

我应该修改该函数中的某些内容以便只调用一次初始化吗？我不想修改外部库。

我进行了研究，在很多地方，他们建议在调用该函数之前将地图设置为空。就我而言，这已经在调用地图之前完成了：

this.map = null;
this.map = initLeafletMap(mapContainerId);

在使用 printThis 之前，使用了其他东西（我不确定是什么）从页面中获取所需的元素并形成用于打印的文档。 Leaflet.js也用过，没有造成任何问题。

如果有人知道问题可能是什么或我可以尝试什么，我将不胜感激。

更新

根据 Jason 的要求，这就是我调用 printThis 的方式：

namespace('WebPageExportationService').getInstance = function () {
function webPageExportationService() {
    this.callback = null;

    this.exportPage = function (exportRequest, callback) {
        this.callback = callback;
        var cssContent = exportRequest.customProperties.cssContent;
        var elementsToPrint = exportRequest.customProperties.elementsToPrint;
        var header = exportRequest.customProperties.customHeader;

        var elementsJoined = elementsToPrint.join(',');

        $(elementsJoined).printThis({
            debug: true,
            printDelay: 2000,
            importStyle: true,
            loadCSS: cssContent,
            header: header,
            afterPrint: function() {
                if (typeof callback === 'function') {
                    callback();
                }
            }
        });
    };
}
return new webPageExportationService();
}

这被放置在前端的一个文件中，我这样称呼它：

this.ExportRedirect = function () {

var dashboardTitle = $('#PaintMetaDataControl1 ul li.metadataItem').last().text();
var cssFileUrl = window.location.origin + '/CSS/printThisStyle.css';
var header = "<img src='" + window.location.origin + "/Img/header.png' />";

var request = {
    downloadedFileName: dashboardTitle,
    customProperties: null
};  

var elements = [];  
elements = ["#CongestionDetail", ".wrap-controller", "#Comp1", "#Comp2", "#CompTasa3", "#statistic-table", "#Type .StatisticTableControl", "#tipoRes", "#group5anios", "#Recurr1", "#Recurr2", ".prefooter"];

var printProperties = {
    cssContent: cssFileUrl,
    elementsToPrint: elements,
    customHeader: header
}
request.customProperties = Object.assign({}, request.customProperties, printProperties);

//window.waiting.Show();
jQuery(document).off().on('iFramePrintLoaded', function () {
    window.waiting.Hide();
});

namespace('WebPageExportationService').getInstance().exportPage(request, function () {
    window.waiting.Hide();
});
LoadingSpinnerChangingDashboards();


};

我检查了使用设置 debug: true 创建的 iframe。我需要的所有元素都在 iframe 内。它还包括并利用 Leaflet 库，与我从中检索要打印的元素的页面相同。这是因为我正在使用库打印交互式地图

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" media="all">

我不确定如何使用 beforePrintEvent 选项。我应该删除 iframe 中对 LeafLet 的调用吗？我认为这不允许我从网页中选择地图。

Answer 1

我通过使用 html2canvas 截取使用 Leaflet 库的地图来解决这个问题。

之后，我将图像放入带有 id 和

display: none

的 html 中，这样它就不可见，然后，我最终可以选择图像以及我想要打印的其余元素。

我将留下以下代码：

var map = document.getElementById('FirstMap_CongestionDetail');
    
html2canvas(map, { scale: 0.5 }).then(canvas => {
  var imageData = canvas.toDataURL();
  var image = "<img id='interactiveMap' src='" + imageData + "' style='display: none;'/>";
  mapPlacedIn.innerHTML += image;
  //More code below...

    });
}