Отдел печати и экспорта карты цезия - PullRequest
Новая
       11

Отдел печати и экспорта карты цезия

0 голосов
/ 04 марта 2019

Он печатается с этим кодом, но на самом деле код не может получить содержимое div, куда карта загружается.Я использую toDataURL() для удовлетворения потребности.

Мой HTML выглядит следующим образом: 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script href="script.js" type="text/javascript"></script>

</head>

<body>

    <div id="cesiumContainer">

    </div>

    <button id="printVoucher" onclick="print();">Print</button>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>

</body>
</html>

Мой CSS выглядит следующим образом: 

body
{ 
    background-color: wheat;
}

canvas
{
    border:1px solid red;
    width: 100%;
    height: 100px;
}

#cesiumContainer
{
    width: 100%;
    height: 500px;
}

Мой JavaScript выглядит следующим образом: 

$(function()
{
    var viewer = document.getElementById("cesiumContainer");
    function print_voucher()
    {   
        var win = window.open();
        win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
        win.print();
        win.location.reload();
    }
    $("#printVoucher").click(function(){ print_voucher(); });
});

Смотрите вывод, что я получаю с этим кодом выше.

Нажмите здесь , чтобы посетить GitHubСсылка на проект.

1 Ответ

0 голосов
/ 11 марта 2019

Проблема заключалась в том, что к моменту создания снимка экрана буфер обмена WebGL уже был заменен.Это происходит по соображениям производительности, вы можете узнать больше об этом здесь:

https://stackoverflow.com/a/32641456/1278023

Проблема была исправлена ​​путем изменения некоторых строк кода следующим образом: 

var viewer = new Cesium.Viewer('cesiumContainer', {
                     contextOptions: {
                     webgl: {
                            preserveDrawingBuffer: true
                            }
    }
});

Вот полный набор HTML-страниц: 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script href="script.js" type="text/javascript"></script>

</head>

<body>

    <div id="cesiumContainer">

    </div>

    <button id="printVoucher" onclick="print();">Print</button>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
        var viewer = new Cesium.Viewer('cesiumContainer', {
                     contextOptions: {
                     webgl: {
                            preserveDrawingBuffer: true
                            }
    }
});
    </script>

</body>
</html>

Найти обновленный проект GitHub Ссылка

...