页面div内容下载成图片

最近遇到一个需求，把页面中一个div的内容（我们的是票样，诸如发票，凭证，电子收据之类），下载成图片，可能遇到过此类问题的小伙伴们都知道，页面是有样式的，单独下载某一个Div如果用以往的办法肯定是先生成图片，传入文件服务器，在下载，那有没有简单的办法？下面就要说的是html2canvas这个东西了：
废话不多说，我们用的angulaJs框架，单页面应用，在html中引入html2canvas如果没有的同学需先下载该插件，这个插件其实就是个页面截图工具，下面是代码，欢迎参考：

<script type="text/javascript">
    function exportVoucher(){//这行是点击方法
        debugger;
        var title = document.getElementById('msgDiv').getAttribute("TITLE");//获取你要截图的div
        $(document).scrollTop(0);

    html2canvas(document.getElementById('msgDiv'),{
        useCORS: true,

// height:document.body.scrollHeight - 200,
scale: 2,
dpi: window.devicePixelRatio * 2
}).then(function(canvas) {

        var img = new Image();
        img.src = canvas.toDataURL('image/jpeg');
        img.name = title + '.jpg';

        var userAgent = navigator.userAgent.toLowerCase();
        //ie
        if(userAgent.indexOf("trident") > 0) {
            var image = canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");
            var arr = image.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            window.navigator.msSaveBlob(new Blob([u8arr], {type: mime}), img.name );

        }else{
            var link = document.createElement('a');
            link.href = img.src;
            link.download = img.name;
            link.click();

        }
    });

}`</script>

希望能帮到你，