在LeafletJS中打印地图

时间:2014-04-27 10:58:49

标签: leaflet

我是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

任何人都可以帮助我吗?

4 个答案:

答案 0 :(得分:7)

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

代码就像

一样简单
$('#map').print();

这是codepen

答案 1 :(得分:2)

您是否已将此行添加到您的HTML?

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

另外我认为你必须启用CORS

答案 2 :(得分:1)

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

如果您想允许添加所有主机:

- !ipMatch
  host:0.0.0.0
  mask:0.0.0.0

答案 3 :(得分:1)

//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();

}