Question

我有一个包含地图的反应组件（使用react-leaflet）我想截取地图的截图（使用html2canvas）在客户端，将其转换为HTML，然后将其发送到我的NodeJS服务器以创建PDF（使用html-pdf）。
问题是地图从外部URL加载其图块，所以当我尝试截取屏幕截图时，我得到一个空白背景。

以下是我想截屏的组件：
React map component

以下是PDF中的结果：
screenshot image

我用过的代码：
在客户端：

// mapComponent is a div containing the component of the map.
let input = document.getElementById('mapComponent');
html2canvas(input)
    .then((canvas) => {
        let imgData = canvas.toDataURL('image/png');
        sendAjaxRequest(imgData);
    });

在服务器上：

let html = '<!DOCTYPE html><html><head></head><body><div>' +
    '<img src="' + imgData + '">' +
    '</div></body></html>';

let options = {
        format: 'A4',
        orientation: 'portrait'
    };

pdf.create(html, options).toFile('./file.pdf', (err, res) => {
    });

非常感谢帮助。

将react组件转换为html

0 个答案: