在 Openlayers 中，我们如何以 pdf 格式打印框架区域，而不是所有画布区域，以及如何将多个框架打印为 pdf 页面？

Question

在 Openlayers 中，我们如何打印 pdf 中的框架区域？而不是所有画布区域，以及如何将多个页面/框架打印为 pdf 页面？

我尝试了选项，

this.workspaceFacade.map.once("rendercomplete", function ())，这个函数在渲染地图上花费了更多的时间，在这个函数中我们正在编写代码以打印为 pdf 但要打印多个页面我们正在运行循环在 map.once 方法中打印框架，但它只打印

`async generatePDF() {
 try {
 let items = this.workspaceFacade.source.getFeatures();
 let finalOutput = [];
 let allExtent = [];
 let printArea = [];
  if (items.length > 0) {
    items.forEach((item) => {
      if (item.getGeometry().getType() == "Polygon") {
        item.setStyle(frameStylePrint());
        let extent = item.getGeometry().getExtent();
        allExtent.push(extent);
      }});
    }
    allExtent.map(async (item, index) => {
      this.workspaceFacade.map
        .getView()
        .fit(item, [1000, 900], { padding: [-10, 10, 0, -10] });
      let legendurl = this.LEGEND_URL;
      let htmlcont = this.htmlContent;
      let svgString, htmlButton, htmlLegend, htmlString;
      this.workspaceFacade.map.once("rendercomplete", function () {
        const mapCanvas = document.createElement("canvas");
        mapCanvas.width = 1000;
        mapCanvas.height = 900;
        const mapContext = mapCanvas.getContext("2d");
        Array.prototype.forEach.call(
          document.querySelectorAll(".ol-layer canvas, canvas.ol-layer"),

          function (canvas) {
            if (canvas.width > 0) {
              const opacity =
                canvas.parentNode.style.opacity || canvas.style.opacity;
              mapContext.globalAlpha = opacity === "" ? 1 : Number(opacity);
              let matrix;
              const transform = canvas.style.transform;
              if (transform) {
                // Get the transform parameters from the style's transform matrix
                matrix = transform
                  .match(/^matrix\(([^\(]*)\)$/)[1]
                  .split(",")
                  .map(Number);
              } else {
                matrix = [
                  parseFloat(canvas.style.width) / canvas.width,
                  0,
                  0,
                  parseFloat(canvas.style.height) / canvas.height,
                  0,
                  0,
                ];
              }
              // Apply the transform to the export map context
              CanvasRenderingContext2D.prototype.setTransform.apply(
                mapContext,
                matrix
);
const backgroundColor =
canvas.parentNode.style.backgroundColor;
if (backgroundColor) {
mapContext.fillRect(0, 0, canvas.width, canvas.height);
}
mapContext.drawImage(canvas, 0, 0);
}
}
);
mapContext.globalAlpha = 1;
mapContext.setTransform(1, 0, 0, 1, 0, 0);
mapCanvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
console.log("fourth", url, item);
htmlcont = `<div><img width="500" height="700" src="${url}" style="float:left; border: 1px solid black"></div>`;
console.log(htmlcont);
svgString = `<div>${htmlcont} </div>`;
htmlButton =
            `<div><input onclick="window.print()" id="button" type="button" value="Generate pdf" style="background-color: #5E7B8D;` +
            `color: #FFFFFF; border-radius: 10px; position: relative;"></div>`; 
htmlLegend = `<div><img width="200" height="700" src="${legendurl}" style="float:left; border: 1px solid black"></div>`;
console.log(svgString);
htmlString = `<div id="planimetric">
${htmlButton}
${svgString}                                 
${htmlLegend}
</div>`;
printArea[index] = htmlString;
const planimetricView = window.open('', '_blank');
planimetricView.document.write(htmlString);
planimetricView.document.title = 'Preliminary Project - Secondary Network Elements';
planimetricView.document.close();
console.log(printArea);
});
});
// return printArea;
}
// )
);
// console.log(printArea1);
console.log(this.LEGEND_URL);
} catch (error) {
throw error;
}
}`

这是我写的打印 pdf 方法，在这里我从矢量源获取多边形列表，并通过在地图中制作范围并将地图与多边形的范围相匹配来打印它们。