在 LeafletJS 中打印地图答案

【问题标题】：Print map in LeafletJS在 LeafletJS 中打印地图
【发布时间】：2014-04-27 10:58:49
【问题描述】：

我是 LeafletJS 的新手。我正在尝试在 LeafletJS 中打印地图。我的打印代码是这样的：

     printProvider = L.print.provider({
      capabilities: printConfig,
      method: 'GET',
      dpi: 254,
      autoLoad: true,
      // outputFormat: 'pdf',
      customParams: {
          mapTitle: 'Print Test',
          comment: 'Testing Leaflet printing'
      }
  });
  // Create a print control with the configured provider and add to the map
  printControl = L.control.print({
      provider: printProvider
  });
  map.addControl(printControl);

但是当我点击打印按钮时，错误是这样的

Proxy Error.
The proxy server received an invalid response from an upstream server.
The proxy server could not handle the request GET /mapfish-print/pdf/print.pdf.

Reason: Error reading from remote server

谁能帮帮我？

【问题讨论】：

标签： leaflet

【解决方案1】：

您可以使用jQuery Plugin 打印地图。

代码很简单

$('#map').print();

这里是codepen。

【讨论】：

【解决方案2】：

您是否已将此行添加到您的 html 中？

<script src="http://apps2.geosmart.co.nz/mapfish-print/pdf/info.json?var=printConfig"></script>

另外我认为你必须启用CORS。

【讨论】：

【解决方案3】：

我认为您错过了在 mapfish 打印服务器的 config.yaml 中的允许主机列表中添加一些主机。

如果您想允许所有主机，您可以添加：

- !ipMatch
  host:0.0.0.0
  mask:0.0.0.0

【讨论】：

【解决方案4】：

//Printing
function printMyMap(){
   let myMapHTML= document.getElementById("myMap");
   let mywindow = window.open("", "PrintTheMap","width=600,height=800");

 let header = '<html><head><link rel="stylesheet"  href="/your path/Site.css" media="print" /> <link rel="stylesheet"  href="/your path/leaflet.css" /> </head>
 //Adding the header to the window
 mywindow.document.write(header);
 //Adding the map into the body
 mywindow.document.write("<body>"+myMapHTML+"<body>");
 mywindow.document.close(); // necessary for IE >= 10
 mywindow.focus(); // necessary for IE >= 10
 mywindow.print();
 mywindow.close();

}

【讨论】：