Question

它使用此代码打印，但是该代码实际上无法获取地图实际加载到的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(); });
});

See the Output what I get with this above code.

点击here访问GitHub Project Link。

打印或导出铯地图加载部

0 个答案: