<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PDF</title>
</head>
<body>
<button id="exportToPdf">导出为PDF</button>
<div id="export_content" style="margin: 0 auto; width: 500px;">
<h1>导出PDF</h1>
<img src="" width="500px" height="500px" id="imgaa" />
<textarea class="imapp" rows="20" cols="80"></textarea>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript">
fileProcess(function(result) {
$('.imapp').val(result);
document.getElementById('imgaa').setAttribute('src', result);
});
function fileProcess(callback) {
var fileUrl = 'https://preview.qiantucdn.com/58pic/38/25/58/70c58PICknMifSUpj42A5_PIC2018.png!w1024_new_small';
var img = fileUrl;
var image = new Image();
// 给img加上随机值一部分情况下能解决跨域
// image.src = img + '?time=' + new Date().valueOf();
image.src = img;
// 允许跨域操作
var base64 = '';
image.setAttribute("crossOrigin", 'anonymous');
var base6422 = image.onload = function() {
base64 = getBase64Image(image);
callback(base64);
}
// console.log(base6422)
// setTimeout(function () {
// document.getElementById('imgaa').setAttribute('src', base64);
// $('.imapp').val(base64);
// }, 200);
}
function getBase64Image(img) {
var demoCanvas = document.createElement("canvas");
demoCanvas.width = img.width;
demoCanvas.height = img.height;
var ctx = demoCanvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = demoCanvas.toDataURL("image/" + ext);
return dataURL;
}
var downPdf = document.getElementById("exportToPdf");
downPdf.onclick = function() {
html2canvas(
document.getElementById("export_content"), {
dpi: 172, //导出pdf清晰度
onrendered: function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', '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 -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('content.pdf');
},
//背景设为白色（默认为黑色）
background: "#fff"
})
}
</script>
</html>
网友评论