search

Igor-Vladyka / leaflet.browser.print

A leaflet plugin which allows users to print the map directly from the browser
https://igor-vladyka.github.io/leaflet.browser.print/
MIT License
154 stars 76 forks source link

css Eliminated when printing controls #43

Closed ghost closed 5 years ago

ghost commented 5 years ago

hello lgor! when i print my map with a scale control ,it works well in (please copy it to browser url for visit) hancc.xyz but when i deploy the plugin in my own project built with vue ,troubles came and i could find the key to solve it, could u give me a hand ? thanks! the code below i used both in the two demo, set the BrowserPrint options [manualMode:true] and see what happens in printed page. L.control.browserPrint({//etc... manualMode: true}); L.control.scale({position:'topleft'}).addTo(map); the printing progress : css(the white background) works in manualMode:true printing page: in printing page when i push the 'print' button i shoud get the pdf like : 2776446059 in face it is like: 2537971359 the css is removed , and the words (100KM and 50mi) in the scale control can be selected like other words in html. actually, all the css will be eliminated when i push [print] button.. thanks a lot! han

Igor-Vladyka commented 5 years ago

Hi there. I just tried your site in Chrome browser and it works well. With all colors :)

THe point with printing is I create overlay as last child of BODY, so non the of CSS that is relative will work. You need to have clear .class to highlight your background for scale control.

Please let me know if you need any other help.

ghost commented 5 years ago

i 've set the control scale css

.leaflet-control.scale{
background:#66ccff;
}
</style>

the #66ccff works in manualMode, but have no effects when i click the [print] button . could u tell me the way to hignlight my control or,the progress of adding child to overla ? does L.legendControl({position: 'bottomright'}).addTo(e.printMap); with the css above take an effect? grateful han