JQuery打印组件 打印canvas绘制图形

目前做的项目中需要打印EChars报表，由于EChars报表是canvas绘制成，需要把报表转换成图片再进行打印。

 

项目中使用的JS版本比较高，使用html2canvas的函数时需要使用jquery-browser.js扩展方法

JS下载路径：http://url.cn/5axYKlE   密码：CMEC8M

引用JS:

<script src="~/Scripts/jquery-browser.js"></script>

<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/Scripts/html2canvas.js"></script>

 

页面效果

<div class="print-Container" onclick="print()" > </div>   

<div id="chartsContent">

</div>

 

打印函数

<script type="text/javascript">

function print() {
html2canvas($("#Restauant-grid"), {
onrendered: function (canvas) {
var url = canvas.toDataURL();
//以下代码为下载此图片功能
var triggerDownload = $("<img> ").attr("src", url);

triggerDownload.jqprint({
debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
operaSupport: false//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
});

}
});

}

</script>

 

打印效果如下：