页面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();//ieif(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>

希望能帮到你，

页面div内容下载成图片相关推荐

uni-app页面部分模块转化成图片并保存（适用app和h5）以及涉及轮播滚动时，区分轮播内容生成图片方法
上一篇uni-app的截屏是截取整个页面的内容,这一篇描述页面中一部分模块转化成图片并保存的方法. 效果描述: (页面:上面是一个卡片加二维码/条形码,下面是一个轮播,可以切换不同的卡片,轮播如果把i ...
html实现页面中内容居中显示图片,javascript怎么让图片居中显示？
javascript怎么让图片居中显示?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. javascript让图片居中显示的方法 1.准备一个图片,如图, ...
vue截取页面一部分内容并导出图片
安装插件 npm install html2canvas --save 引入当前需要的vue文件 import html2canvas from "html2canvas"; 全部 ...
HTML内容转换成图片
把HTML转换成图片,这是在很多时候都会用到的,比如说证书的生成,打印,当把数据信息填写进证书里面的之后,就需要把这个html转换成图片,然后进行打印.当然了不仅仅只是只把证书生成图片那么简单,甚至只 ...
使用icepdf将pdf首页内容转成图片
说明: 1.图片命名规则:给定的文件所属目录+给定的文件的名称+.+png,即同目录下同名称的png图片 2.基本业务: a.判断同目录下同名称的png图片是否存在,若已经存在直接return b.若 ...
php获取本页面div内容,php获取网页中图片、DIV内容的简单方法
1.获取网页中所有的图片: 复制代码代码如下: //取得指定位址的內容,并储存至 $text $text=file_get_contents('http://www.jb51.net/'); //取 ...
jquery在当前页面打印页面div内容实例
插件:jquery.jqprint 版本:v 0.3 JQuery:适合所有版本jquery文件配合使用适用:所有类型html页面以下是插件文件代码:jquery.jqprint-0.3.js / ...
微信小程序页面元素如何保存成图片
微信小程序没有将view,image,text等标签直接生成图片的api.但是有将canvas直接生成图片的api 将canvas标签生成图片的api--------------------- wx. ...
JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image NPM | npm.io,该插件的原理是: ...

页面div内容下载成图片

页面div内容下载成图片相关推荐

最新文章

热门文章