javascript: (function () {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var script1 = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://hcsy.gitee.io/htest/html2canvas.js?" + Date.now();
script1.type = 'text/javascript';
script1.src = "https://hcsy.gitee.io/htest/jsPdf.debug.js?" + Date.now();
script.onload = script.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
script1.onload = script1.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
var result = prompt('输入样式ID');
var styleId = "article_content";
console.log("result>>",result);
if (result) {
styleId = result;
}
console.log("styleId",styleId);
/**
* 具体执行
*/
html2canvas(document.getElementById(styleId), {
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pageHeight = contentWidth / 595.28 * 841.89;
var leftHeight = contentHeight;
var position = 0;
var imgWidth = 555.28;
var imgHeight = 555.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('hcsy' + Date.now() + '.pdf');
}
})
}
};
}
};
head.appendChild(script);
head.appendChild(script1);
})()
使用:
1.
2.点击保存
3.在需要的页面点击标签即可
javascript: (function () {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
var script1 = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://hcsy.gitee.io/htest/html2canvas.js?" + Date.now();
script1.type = 'text/javascript';
script1.src = "https://hcsy.gitee.io/htest/jsPdf.debug.js?" + Date.now();
script.onload = script.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
script1.onload = script1.onreadystatechange = function () {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
var result = prompt('输入样式ID');
var styleId = "article_content";
console.log("result>>", result);
if (result) {
styleId = result;
}
console.log("styleId", styleId);
/**
* 具体执行
*/
var canvas2 = document.createElement("canvas");
var _canvas = document.getElementById(styleId);
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
canvas2.width = w * 1;
canvas2.height = h * 1;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
var context = canvas2.getContext("2d");
context.scale(1, 1);
html2canvas(document.getElementById(styleId)).then(function (canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=imgUri;
});
}
};
}
};
head.appendChild(script);
head.appendChild(script1);
})()
// if(!this.check()){alert("所有打*号的都是必填项");return}
//获取节点高度,后面为克隆节点设置高度。
var height = $("#app").height();
//克隆节点,默认为false,不复制方法属性,为true是全部复制。
var cloneDom = $("#app").clone(true);
//设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "#f2f3f5",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
//将克隆节点动态追加到body后面。
console.log(cloneDom);
cloneDom.find("#button").remove();
$("body").append(cloneDom);
//插件生成base64img图片。
html2canvas(cloneDom, {
//Whether to allow cross-origin images to taint the canvas
allowTaint: true,
//Whether to test each image if it taints the canvas before drawing them
taintTest: false,
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
console.log(contentHeight);
console.log(contentWidth);
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//注① var
// pdf = new jsPDF('', 'pt', 'a4');
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89; //避免添加空白页
if (leftHeight > 0) {
//注②
pdf.addPage();
}
}
}
pdf.save('业务调查表.pdf');
}
});