需要用到的插件：html2canvas jsPDF.debug.js jquery
html2canvas
github地址：
https://github.com/niklasvh/html2canvas
jsPDF
和
html2canvas
插件已上传到我的阿里云网盘（需要自取），地址：
https://www.aliyundrive.com/s/auACtPpkw4w
html2暂时不支持IE内核浏览器
//判断浏览器内核是否是IE
if(!!window.ActiveXObject || "ActiveXObject" in window){
alert('截图打印暂不支持IE内核浏览器，请更换火狐或谷歌chrome内核浏览器，360等双核浏览器请切换至极速模式');
return;
//获取iframe
var shareContent = document.getElementById('form_iframe');
//滚动iframe到顶部,如果不在顶部会截不完整
shareContent.contentWindow.scrollTo(0,0);
//获取iframe的宽高
var width = shareContent.contentWindow.document.documentElement.scrollWidth;
var height = shareContent.contentWindow.document.documentElement.scrollHeight;
var canvas = document.createElement("canvas"); //创建一个canvas节点
//定义任意放大倍数 支持小数,表单内容过多，请尽量往小了调。目前测试，打印3页chrome下会出现崩溃
var scale = 1.5;
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale ; //定义canvas高度 *缩放
canvas.style.width = width * scale + "px";
canvas.style.height = height * scale + "px";
var content = canvas.getContext("2d");
content.scale(scale,scale);
//配置canvas参数
var newOptions = {
scale:scale,
canvas : canvas,
background:"#ffffff",//设置背景色，避免打印iframe出现黑底
width: width,
height: height,
接着开始执行html2canvas截图以及生成pdf
//获取iframe Body
var frameBody = $('#form_iframe').contents().find('body');
html2canvas(frameBody, newOptions).then(function (canvas) {
//获取canvas画布的宽高
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth /841.89 * 592.28;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 841.89;
var imgHeight = 841.89/contentWidth * contentHeight;
var pageData = canvas.toDataURL();
var pdf = new jsPDF('l', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
}else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 592.28;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
pdf.save("content.pdf");
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置
jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。
官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/
1、安装：npm install jspdf
2、引入：import jsPDF from "jspdf"
3、使用：
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
通常来说我们需要使用打印功能一般都是直接使用window.print()，因为此方法兼容目前所有浏览器，但如果需要设置打印的一些参数的话，其实各种浏览器之间都有种区别，造成不兼容。这里说一下关于设置默认横向打印的一些写法，亲测有效。首先先说谷歌浏览器吧，它设置默认横向是比较简单的，可以通过设置css或js的方法，如：//一般语言的css写法：
js写法,只需要将下面代码调用放在window.pri...
文中内容是在 Vue 项目中使用 html2canvas和 jspdf 插件实现将页面的内容生成 PDF，并记录在使用过程中遇到的一些问题和解决方案。文中将会贴出很多参考文章，如果各位有需要，可以前往原文章查阅。
html2canvas + jspdf介绍使用方法分页分割问题html2canvas生成图片只有一半其他参考文章
1、html2canvas
该插件允许我们直接在浏览器上对网页或其部分进行“截图”操作，但是屏幕截图基于 DOM，这一点很关键。这就会导致截图的结果，很可能不是自己想要的。.
其实这个是因为我们的canvas在绘制的时候发现了不同源头的资源，这个时候浏览器会认为污染了当前canvas同时也会带来一系列安全的问题。
在"被污染"的canvas中调用以下方法将会抛出安全错误：
在 <canvas> 的上下文上调用getImageData()
在 <canvas> 上调用 toBlob()
在 <canvas> 上调用 toDataURL()
这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露
在html2canvas中画图的时候
<el-dialog :visible.sync="printDialog" class="printDialog">
<div ref="print">
<section class="print-page page-a4">
<acceptance-form :reg-id="printTabl...
canvas像素很低，打印是按照元素的数量打印。所以，html标签嵌套尽可能少。对于高清质的html图表，标签过多，往往会致使页面崩溃。
远程地址的图片打印会有时候无法打印。如果希望打印清晰画面，可以先把画布调大，再打印。根据页面大小可以设置指定的纸张大小。但是页面的高宽并不是实际的高宽，（比方说a4：21cm，29.7cm.这个尺寸对于浏览器自身的print()方法管用，jspdf不管用）[dem
一开始的时候，准备使用html2canvas+jspdf来实现的，但是遇到了一个麻烦的问题，在其他项目中使用html2canvas没有任何问题，但是在要开发的项目中使用，就给我报错，是真滴烦。html2canvas报错，还找不到解决办法我也是难受的一批，于是找到了它的替代方案。
html页面导出pdf，本来是一件很简单的事情，在浏览器直接打印(Mac快捷键为⌘+p；Windows快捷键为ctrl+p)，就可以把页面另存为pdf文件，但对于要经常把页面导出为pdf的用户来说并不友好，一个合格程序员的标准就是：做出来的软件猪都要会用，否则你就是猪。
调研了几种html导出pdf的实现方式，这里把要点记录下来分享下。
特殊字符、样式
jsPDF
