├── .gitignore ├── package.json ├── LICENSE ├── README.md ├── jquery.print.js ├── index.js └── jquery.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | # /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cesium-print", 3 | "version": "1.0.7", 4 | "description": "cesium print plugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/richard1015/cesium-print.git" 12 | }, 13 | "keywords": [ 14 | "cesium", 15 | "cesium-print", 16 | "cesium-plugin" 17 | ], 18 | "author": "richard1015", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/richard1015/cesium-print/issues" 22 | }, 23 | "homepage": "https://github.com/richard1015/cesium-print#readme", 24 | "dependencies": { 25 | "html2canvas": "^1.0.0-rc.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 richard1015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # cesium-print Plugin 3 | Cesium 动态打印插件 4 | cesium-print is a plugin for cesium printing 5 | 6 | ![演示](https://github.com/richard1015/richard1015.github.io/blob/master/static/image/print.gif "演示.gif") 7 | 8 | ## Usage 9 | 10 | Include it in your code after importing npm, like: 11 | 12 | ``` 13 | npm install cesium-print -dev 14 | ``` 15 | 16 | Use it like: 17 | 18 | ```js 19 | import CesiumPrint from "cesium-print"; 20 | ``` 21 | 22 | ```js 23 | 24 | viewer = new Cesium.Viewer("cesiumContainer", { 25 | contextOptions: { 26 | id: "cesiumCanvas",//must 27 | webgl: { 28 | preserveDrawingBuffer: true 29 | } 30 | } 31 | } 32 | 33 | //打印cesium canvas dom 34 | CesiumPrint.drawArea("cesiumCanvas", { 35 | penColor: "yellow", //画笔颜色 36 | strokeWidth: 1 //单位 px 37 | }) 38 | .then(base64url => { 39 | //base64url is images 40 | //print drawArea dom 41 | CesiumPrint.print(base64url); 42 | }) 43 | .catch(error => { 44 | console.error(error); 45 | }); 46 | ``` 47 | 48 | You can submit the options object like: 49 | ```js 50 | //打印cesium canvas dom 51 | CesiumPrint.drawArea("cesiumCanvas", { 52 | penColor: "yellow", //画笔颜色 53 | strokeWidth: 1 //单位 px 54 | }) 55 | .then(base64url => { 56 | //自定义打印(设置纸张大小,打印标题) 57 | // 高 宽 58 | // A0:1189mm * 841mm 59 | // A1:841mm * 594mm 60 | // A2:594mm * 420mm 61 | // A3:420mm * 297mm 62 | // A4:297mm * 210mm 63 | // 页边距: 0.75 inch 64 | // A1: 23.39x33.11 inch 65 | // 打印机DPI:300DPI 66 | // 屏幕DPI : 96DPI 67 | // width = (23.39 - 0.75 * 2) * 96 = 2101 px 68 | // height = (33.11 - 0.75 * 2)* 96 = 3034 px 69 | // A4: 8.27x11.69 inch 70 | // 打印机DPI:300DPI 71 | // 屏幕DPI : 96DPI 72 | // width = (8.27 - 0.75 * 2) * 96 = 650 px 73 | // height = (11.69 - 0.75 * 2)* 96 = 978 px 74 | // 所以,当 的width=650px, height=978px时,用IE 打印时,刚好能打印一页的A4纸. 75 | // //a1横向打印尺寸 76 | // var a1 = { width: "3034", height: "2101" }; 77 | // //a4横向打印尺寸 78 | var a4 = { width: "978", height: "650" }; 79 | let printOptions = { 80 | title: "打印标题(print title)", 81 | width: a4.width, 82 | height: a4.height, 83 | fontSize: "30", 84 | downLoadEnable: true //是否下载打印文件 85 | }; 86 | CesiumPrint.print(base64url, printOptions); 87 | }); 88 | }) 89 | .catch(error => { 90 | console.error(error); 91 | }); 92 | ``` 93 | 94 | Currently this plugin supports the following options: 95 | 96 | #### penColor 97 | 98 | - Default: `red` 99 | - Acceptable-Values: color string 100 | - Function Desc: pen Color 101 | 102 | #### strokeWidth 103 | 104 | - Default: `1` 105 | - Acceptable-Values: number 106 | - Function: stroke width ( unit px ) 107 | 108 | #### width 109 | 110 | - Default: `978` 111 | - Acceptable-Values: number 112 | - Function: print width ( unit px ) 113 | 114 | #### height 115 | 116 | - Default: `650`, creates a hidden iframe if no-vaild iframe selector is passed 117 | - Acceptable-Values: number 118 | - Function: print width ( unit px ) 119 | 120 | #### fontSize 121 | 122 | - Default: `32` 123 | - Acceptable-Values: number 124 | - Function: print title font size ( unit px ) 125 | 126 | #### downLoadEnable 127 | 128 | - Default: `true` 129 | - Acceptable-Values: Boolean 130 | - Function: down load print file enable 131 | 132 | 133 | #### title 134 | 135 | - Default: `print`, uses the host page title 136 | - Acceptable-Values: Any single-line string 137 | - Function: To change the printed title 138 | 139 | 140 | 141 | ### Browsers 142 | * Google Chrome - v ... 143 | * Firefox - v ... 144 | 145 | ## License 146 | .... 147 | 148 | ## Demo 149 | [cesium plugin /demo](https://richard1015.github.io/cesium/) 150 | # Code Demo 151 | [https://github.com/richard1015/cesium-vue-example /(cesium-print,cesium-navigation-es6)](https://github.com/richard1015/cesium-vue-example/blob/master/src/components/CesiumViewer.vue) 152 | 153 | ## Other Cesium Plugin 154 | [cesium-navigation-es6 /github](https://github.com/richard1015/cesium-navigation-es6) 155 | 156 | --------------------------------------- 157 | Like our [work](https://github.com/richard1015)? [Get in touch 51844712@qq.com!](mailto:51844712@qq.com) 158 | -------------------------------------------------------------------------------- /jquery.print.js: -------------------------------------------------------------------------------- 1 | /* @license 2 | * jQuery.print, version 1.6.0 3 | * (c) Sathvik Ponangi, Doers' Guild 4 | * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) 5 | *--------------------------------------------------------------------------*/ 6 | (function ($) { 7 | "use strict"; 8 | // A nice closure for our definitions 9 | 10 | function jQueryCloneWithSelectAndTextAreaValues(elmToClone, withDataAndEvents, deepWithDataAndEvents) { 11 | // Replacement jQuery clone that also clones the values in selects and textareas as jQuery doesn't for performance reasons - https://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values 12 | // Based on https://github.com/spencertipping/jquery.fix.clone 13 | var $elmToClone = $(elmToClone), 14 | $result = $elmToClone.clone(withDataAndEvents, deepWithDataAndEvents), 15 | $myTextareas = $elmToClone.find('textarea').add($elmToClone.filter('textarea')), 16 | $resultTextareas = $result.find('textarea').add($result.filter('textarea')), 17 | $mySelects = $elmToClone.find('select').add($elmToClone.filter('select')), 18 | $resultSelects = $result.find('select').add($result.filter('select')), 19 | i, l, j, m; 20 | 21 | for (i = 0, l = $myTextareas.length; i < l; ++i) { 22 | $($resultTextareas[i]).val($($myTextareas[i]).val()); 23 | } 24 | for (i = 0, l = $mySelects.length; i < l; ++i) { 25 | for (j = 0, m = $mySelects[i].options.length; j < m; ++j) { 26 | if ($mySelects[i].options[j].selected === true) { 27 | $resultSelects[i].options[j].selected = true; 28 | } 29 | } 30 | } 31 | return $result; 32 | } 33 | 34 | function getjQueryObject(string) { 35 | // Make string a vaild jQuery thing 36 | var jqObj = $(""); 37 | try { 38 | jqObj = jQueryCloneWithSelectAndTextAreaValues(string); 39 | } catch (e) { 40 | jqObj = $("") 41 | .html(string); 42 | } 43 | return jqObj; 44 | } 45 | 46 | function printFrame(frameWindow, content, options) { 47 | // Print the selected window/iframe 48 | var def = $.Deferred(); 49 | try { 50 | frameWindow = frameWindow.contentWindow || frameWindow.contentDocument || frameWindow; 51 | var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow; 52 | 53 | if (options.doctype) { 54 | wdoc.write(options.doctype); 55 | } 56 | wdoc.write(content); 57 | //按照指定宽高 58 | wdoc.childNodes[1].childNodes[1].style = "width: " + options.width + "px;height: " + options.height + "px;"; 59 | 60 | wdoc.close(); 61 | var printed = false, 62 | callPrint = function () { 63 | if (printed) { 64 | return; 65 | } 66 | // Fix for IE : Allow it to render the iframe 67 | frameWindow.focus(); 68 | try { 69 | // Fix for IE11 - printng the whole page instead of the iframe content 70 | if (!frameWindow.document.execCommand('print', false, null)) { 71 | // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891 72 | frameWindow.print(); 73 | } 74 | // focus body as it is losing focus in iPad and content not getting printed 75 | $('body').focus(); 76 | } catch (e) { 77 | frameWindow.print(); 78 | } 79 | frameWindow.close(); 80 | printed = true; 81 | def.resolve(); 82 | }; 83 | // Print once the frame window loads - seems to work for the new-window option but unreliable for the iframe 84 | $(frameWindow).on("load", callPrint); 85 | // Fallback to printing directly if the frame doesn't fire the load event for whatever reason 86 | setTimeout(callPrint, options.timeout); 87 | } catch (err) { 88 | def.reject(err); 89 | } 90 | return def; 91 | } 92 | 93 | function printContentInIFrame(content, options) { 94 | var $iframe = $(options.iframe + ""); 95 | var iframeCount = $iframe.length; 96 | if (iframeCount === 0) { 97 | // Create a new iFrame if none is given 98 | $iframe = $('