使用html2canvas.min.js将网页生成图片并打印(笔记记录)

<iframe id="downloadFrame" style="display:none;"></iframe>

//打印
function yl_dy(){//选择器为要生成图片的区域html2canvas(document.querySelector(".dlllb_aler_dy")).then(canvas => {var baseCode = canvas.toDataURL("image/png");var idx = baseCode.indexOf('image/png;base64,');baseCode = baseCode.substring(idx + 'image/png;base64,'.length);var data = window.atob(baseCode);var len = data.length;var arr = new Uint8Array(len);for(let i = 0; i < len; ++i) {arr[i] = data.charCodeAt(i);}var blob = new Blob([arr], {type: 'image/png'});//创建文件的urlvar blobURL = window.URL.createObjectURL(blob);//将url路径赋给src$('#downloadFrame').attr('src',blobURL);//加载完成后打印$('#downloadFrame').load(function() {console.log('print')var PDF = document.getElementById('downloadFrame');PDF.focus();PDF.contentWindow.print();});});
}

使用html2canvas.min.js将网页生成图片并打印(笔记记录)相关推荐

html2canvas.min.js 截图多行文字错位；截图不全不完整
在帮助组员解决问题中记录使用过程中遇到的问题: 1. iOS 系统上截图生成的海报文字分享出去之后文字会错位这个是html2canvas 对中文支持的问题 html 文件: <div i ...
js实现网页的过滤打印（去掉你不想出现的内容）
首先,我们理解打印的过程,控制页面打印有很多种方法,这里我只讲最简单的一种. 打印分三步: 打印前,打印和打印后. 过滤的原理其实很简单,就是打印前将不该显示的元素全部display = no ...
js 实现网页一个一个字打印出来的效果
最近看了一个小效果,感觉还挺不错,代码实现起来也挺简单,于是就写了些. html: <textarea id="showStr"></textarea> / ...
html2canvas 和 Canvas2Image实现网页截屏下载图片功能（简单小例子）
效果图代码 style样式 <style>* {margin: 0;padding: 0;}#originalDOM {width:500px;height:300px;line-hei ...
网页要展示大量图片时怎样延迟加载图片 lyz.delayLoading.min.js
当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载完毕再执行其它操作,而浏览器本身的http请求的最大并发数量(通常是2个,最多的也只是8个)又限制了全部图片完成下载的时间,这样网页的速 ...
HTML网页使用CDN的jquery.qrcode.min.js生成页面二维码（直接可以复制使用）
HTML页面代码 <!DOCTYPE html> <html> <head><title></title><meta http-equ ...
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...
JS 实现网页截屏五种方法
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS Puppeteer(chrome headle ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

使用html2canvas.min.js将网页生成图片并打印(笔记记录)

使用html2canvas.min.js将网页生成图片并打印(笔记记录)相关推荐

最新文章

热门文章