将 Leaflet 映射反应为 PDF

Question

我可以使用

生成PNG文件

https://www.npmjs.com/package/react-leaflet-easyprint

我需要从 PNG 文件生成 PDF。

如何防止下载文件并在下载 PNG 文件之前使用此内容生成 PDF 文件？

是否有更好的库可以用于此目的？

也有使用nodeJs和phantomJs的选项，但是这样会出现代码重复

Answer 1

leaflet-easyprint 库利用 dom-to-image 库。

https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/src/index.js#L127

我建议从那里复制一些代码并使用 dom-to-image + filesaver 将 dom 转换为 base64 blob 导出为 pdf。

https://github.com/tsayen/dom-to-image#usage

Answer 2

供参考：

我结合使用了 dom-to-image 库和 https://react-pdf.org/

得到了地图的参考，得到了它的容器。并将其传递给 dom-to-image 并在 reactPdf 中使用结果。我使用了 A4 横向大小和方向。

const _a4PageSize= { height: 715, width: 1045 }
domtoimage
  .toPng(mapRef.current.leafletElement.getContainer(), _a4PageSize)
  .then(dataUrl => {
    //pass dataUrl to reactpdf document here
  })
  .catch(err => console.log("to img err", err));

// reactpdf 文档

  <Document >          
    <Page size="A4" orientation="landscape">
        <Image src={{uri: dataUrl}}/>            
    </Page> 
  </Document>

将 Leaflet 映射反应为 PDF

React Leaflet map to PDF

pdf-generation

reactjs

react-leaflet