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
          // 因此，當<table> 的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

github.com/richard1015…

Other Cesium Plugin

cesium-navigation-es6 /github

---

Like our work? Get in touch 51844712@qq.com!