首先说明，最佳方案是方式一。
方式二也可以实现，但是有点麻烦，兼容性还不见得好。
方式三，英文环境下挺好的，但不兼容中文。
方式一：html2pdf
使用 html2pdf.js 这个类库。具体使用方法可参考官方说明。
项目地址：html2pdf
源码下载地址：https://github.com/iJoeychang/convert_html_to_pdf_pro
方式二：jsPDF library
jsPDF library 这种方式也可以实现导出 pdf，但是没有第一种方式好。
使用方式
- 引入类库
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- jsPDF library -->
<!-- <script src="js/jsPDF/dist/jspdf.min.js"></script> -->
<script src="js/jsPDF/dist/jspdf.debug.js"></script>
<script src="js/jsPDF/html2canvas.js"></script>
- 实现代码
<script>
var pdf,page_section,HTML_Width,HTML_Height,top_left_margin,PDF_Width,PDF_Height,canvas_image_width,canvas_image_height;
function calculatePDF_height_width(selector,index){
page_section = $(selector).eq(index);
HTML_Width = page_section.width();
HTML_Height = page_section.height();
top_left_margin = 15;
PDF_Width = HTML_Width + (top_left_margin * 2);
PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
canvas_image_width = HTML_Width;
canvas_image_height = HTML_Height;
}
function generatePDF() {
var target = document.getElementById("content");//要转化页面内容的id
html2canvas(target, {
background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑
onrendered:function(canvas) {
//未生成pdf的html页面高度
var leftHeight = canvas.height;
var a4Width = 595.28
var a4Height = 841.89
//一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
//pdf页面偏移
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('x', 'pt', 'a4');
var index = 1,
canvas1 = document.createElement('canvas'),
height;
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
var pdfName='导出PDF';
$('.head-content').append($(
'<div class="pdfTip">' +
' <div>正在生成第<span class="pdfProgress">1</span>页，共<span class="pdfTotal"></span>页...' +
'</div>'));
function createImpl(canvas) {
if (leftHeight > 0) {
index++;
var checkCount = 0;
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef;
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
isWrite = false
break
}
}
if (isWrite) {
checkCount++
if (checkCount >= 10) {
break
}
} else {
checkCount = 0
}
}
height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
if(height<=0){
height = a4HeightRef;
}
} else {
height = leftHeight;
}
canvas1.width = canvas.width;
canvas1.height = height;
// console.log(index, 'height:', height, 'pos', position);
var ctx = canvas1.getContext('2d');
ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);
var pageHeight = Math.round(a4Width / canvas.width * height);
// pdf.setPageSize(null, pageHeight)
if(position != 0){
pdf.addPage();
}
pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4Width, a4Width / canvas1.width * height);
leftHeight -= height;
position += height;
$('.pdfProgress').text(index + 1);
$('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
if (leftHeight > 0) {
setTimeout(createImpl, 500, canvas);
} else {
pdf.save(pdfName + '.pdf');
$('.pdfTip').remove();
}
}
}
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
pdf.save(pdfName + '.pdf')
} else {
try {
pdf.deletePage(0);
$('.pdfTip').show();
$('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
setTimeout(createImpl, 500, canvas);
} catch (err) {
console.log(err);
}
}
}
})
}
</script>
方式三：convert_html_to_pdf_javascript
参考这个：Convert HTML to PDF using JavaScript
原本想着这种方式不错，还花了点钱把源码下载了，最终发现不兼容中文。坑...
源码下载地址：https://github.com/iJoeychang/convertHtmlToPdf
参考：
方式一：
- html2pdf
- 关于html2canvas截断问题的解决方案「PDF分页实现」
- 基于html2canvas实现网页保存为图片及图片清晰度优化
- HTML2CANVAS 中文文档
- 页面直接导出为PDF文件，支持分页与页边距
方式二：
