cesium-print 动态打印插件

Cesium 动态打印插件
cesium-print is a plugin for cesium printing

Usage

Include it in your code after importing npm, like:

    npm install cesium-print -dev

Use it like:

   import CesiumPrint from "cesium-print";
      
      viewer = new Cesium.Viewer("cesiumContainer", {
        contextOptions: {
          id: "cesiumCanvas",//must
          webgl: {
            preserveDrawingBuffer: true
          }
        }
      }
      
      //打印cesium canvas dom
      CesiumPrint.drawArea("cesiumCanvas", {
        penColor: "yellow", //画笔颜色
        strokeWidth: 1 //单位 px
      })
        .then(base64url => {
          //base64url is images
          //print drawArea dom
          CesiumPrint.print(base64url);
        })
        .catch(error => {
          console.error(error);
        });

You can submit the options object like:

    //打印cesium canvas dom
      CesiumPrint.drawArea("cesiumCanvas", {
        penColor: "yellow", //画笔颜色
        strokeWidth: 1 //单位 px
      })
        .then(base64url => {
          //自定义打印(设置纸张大小,打印标题)
          //     高       宽
          // A0:1189mm * 841mm
          // A1:841mm * 594mm
          // A2:594mm * 420mm
          // A3:420mm * 297mm
          // A4:297mm * 210mm
          //  页边距: 0.75 inch
          // A1: 23.39x33.11 inch
          // 打印机DPI:300DPI
          // 屏幕DPI  : 96DPI
          // width = (23.39 - 0.75 * 2) * 96  = 2101 px
          // height =  (33.11 - 0.75 * 2)* 96  = 3034 px
          // A4: 8.27x11.69 inch
          // 打印机DPI:300DPI
          // 屏幕DPI  : 96DPI
          // width = (8.27 - 0.75 * 2) * 96  = 650 px
          // height =  (11.69 - 0.75 * 2)* 96  = 978 px
          // 所以,当 的width=650px, height=978px时,用IE 打印时,刚好能打印一页的A4纸.
          // //a1横向打印尺寸
          // var a1 = { width: "3034", height: "2101" };
          // //a4横向打印尺寸
          var a4 = { width: "978", height: "650" };
            let printOptions = {
              title: "打印标题(print title)",
              width: a4.width,
              height: a4.height,
              fontSize: "30",
              downLoadEnable: true //是否下载打印文件
            };
            CesiumPrint.print(base64url, printOptions);
          });
        })
        .catch(error => {
          console.error(error);
        });

Currently this plugin supports the following options:

penColor

  • Default: red
  • Acceptable-Values: color string
  • Function Desc: pen Color

strokeWidth

  • Default: 1
  • Acceptable-Values: number
  • Function: stroke width ( unit px )

width

  • Default: 978
  • Acceptable-Values: number
  • Function: print width ( unit px )

height

  • Default: 650, creates a hidden iframe if no-vaild iframe selector is passed
  • Acceptable-Values: number
  • Function: print width ( unit px )

fontSize

  • Default: 32
  • Acceptable-Values: number
  • Function: print title font size ( unit px )

downLoadEnable

  • Default: true
  • Acceptable-Values: Boolean
  • Function: down load print file enable

title

  • Default: print, uses the host page title
  • Acceptable-Values: Any single-line string
  • Function: To change the printed title

Browsers

  • Google Chrome - v ...
  • Firefox - v ...

License

....

Demo

cesium plugin /demo

Code Demo

https://github.com/richard1015/cesium-vue-example /(cesium-print,cesium-navigation-es6)

Other Cesium Plugin

cesium-navigation-es6 /github


Like our work? Get in touch [email protected]!

你可能感兴趣的:(cesium-print 动态打印插件)