首页 > 解决方案 > 如何使用 Rotativa 在 PDF 上打印使用谷歌地图 API 的地图?

问题描述

我正在使用 Rotativa 来获取包含先前在 Modal 上显示的信息的 PDF,但是,当用户单击按钮获取 PDF 时,这个不包含使用谷歌地图 API 的地图,是否存在有什么办法可以解决这个问题?

这是先前向用户显示的带有信息的模态:

模态

这是 PDF,请注意 PDF 没有打印地图,它应该在那里:

PDF格式

这是我的代码:

前端代码


             var map = new google.maps.Map($('#map')[0], {
            center: { lat: 19.397, lng: -99.144 },
            zoom: 10
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(19.397, -99.144),
            map: map,
            title: ""
        });

        var bounds = new google.maps.LatLngBounds();

        google.maps.event.trigger(map, "resize");
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);


        marker.setPosition(LatLng);
        google.maps.event.trigger(map, 'resize');
        map.setCenter(LatLng);
        map.setZoom(18);



        /*Poligonos*/
        var rut = $("#txt_Ruta").val();
        var ced = $("#txt_Cedis").val();
        var frecu = CosasModal.orden.Frecuencia;

        var jqxhr = $.post("/Poligonos/ObtenerPoligono", { "Ruta": rut, "Frecuencia": frecu, "Cedis": ced },
            function (data) {
                if (data.status == "OK") {
                    var Poligono = new google.maps.Polyline({
                        path: data.coordinates,
                        geodesic: true,
                        strokeColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    });

                    Poligono.setMap(map);

                    var infowindow = new google.maps.InfoWindow({
                        content: "Ruta " + rut + "<br>Frecuencia: " + frecu + "<br>Cedis: " + ced
                    });

                    google.maps.event.addListener(Poligono, 'click', function (event) {

                        infowindow.setPosition(event.latLng);
                        infowindow.open(map);
                    });

                    var points = Poligono.getPath().getArray();
                    for (var n = 0; n < points.length; n++) {
                        bounds.extend(points[n]);
                    }
                    map.fitBounds(bounds);
                }
            });
        jqxhr.fail(function () {
            //alert("Error de comunicación con el servidor.");
            swal("Error", "Error de comunicación con el servidor.", "error");
        });
        map.fitBounds(bounds);
        map.panToBounds(bounds);
        /*fin poligonos*/


Rotativa 代码(假设您收到 idOrden 变量)

   var pdf = new ActionAsPdf("ModalPedidosPdfView", new { idOrden = idOrden })
            {
                FileName = "ReporteOrdenIndividual" + DateTime.Now.ToString() + "_" + idOrden
            };

            return pdf;

标签: c#asp.net-mvcgoogle-mapspdfrotativa

解决方案


我使用Select.pdf而不是 Rotativa解决了我的问题


推荐阅读