如何使用 html2pdf.js 下载包含 pdf 瓦片的 leaflet.js 地图

Question

我目前正在尝试使用 html2pdf() 下载包含 OSM 背景图块的 leaflet map 作为 PDF，但我遇到了地图（在更复杂的情况下还有我添加的几何图形）的问题已实施，但不包括 OSM 背景图。我附上一个简单的例子和 jsfiddle 链接：https://jsfiddle.net/p73ubhvn/9/ 也许有人知道这个问题的解决方案？

我已经尝试过下面的例子；地图呈现为 pdf，但不包括背景图块。目的是包括 OSM 磁贴。另外，恐怕使用 html2pdf() 是强制性的，因为我的实际用例是在更大的上下文中。

HTML：

<!DOCTYPE html>
<html>

  <head>
    <title>Leaflet</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
      body {
        margin: 0;
      }

      html,
      body,
      #map {
        height: 250px;
      }

    </style>
  </head>

  <body>
    <div id="map" style='width: 300px;'></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
    <script src="script.js"></script>


    <script>
      function delay(time) {
        return new Promise(resolve => setTimeout(resolve, time));
      }

      delay(100).then(() =>
        html2pdf().set({
          jsPDF: {
            orientation: 'landscape'
          }
        }).from(document.getElementById('map')).toContainer().toCanvas().toImg().toPdf().save());

    </script>
  </body>

</html>

JS:

var map = L.map('map', {
  preferCanvas: true,
  layers: [
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
    })
  ],
  center: [0, 0],
  zoom: 0
});

Answer 1

我使用不同的 htm2pdf 从那些小提琴文件中生成这个，所以请忽略我简单地拖放 html 以立即查看 pdf 预览中的变化的方式，它是您需要考虑的模板。

所以我所做的是阅读链接的网格以计算出瓷砖的数量（一个 8/89/120 在左下角突出显示），我为第 8 级展示了它，因为它很合适。

您遇到的问题是通常不允许打印由 js 脚本驱动的帧中帧，这里我只是将 tiles 以 < div > 列和行进行帧化，以便在拖放后几分之一秒内下载文件。您的替代方法是将 html 视图简单地保存为带有文件文件夹的 complete.html 并像我一样删除脚本以打印平铺图像。

质量完全取决于您用作标量的理想情况下，您应该使用整数分母（例如 1/2 或 1/3）来保持该比例的完美像素。

对于我的罪过，我使用了一种方法，该方法不适合高质量但足以完成我设定的任务。

如何使用 html2pdf.js 下载包含 pdf 瓦片的 leaflet.js 地图

问题描述投票：0回答：1

1个回答

最新问题

如何使用 html2pdf.js 下载包含 pdf 瓦片的 leaflet.js 地图

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1