JavaScript 导出 HTML 到 PDF

Posted 2021-08-12 北冥鱼_

首先说明，最佳方案是方式一。

方式二也可以实现，但是有点麻烦，兼容性还不见得好。

方式三，英文环境下挺好的，但不兼容中文。

方式一：html2pdf

使用 html2pdf.js 这个类库。具体使用方法可参考官方说明。

项目地址：html2pdf

源码下载地址：https://github.com/iJoeychang/convert_html_to_pdf_pro

方式二：jsPDF library

jsPDF library 这种方式也可以实现导出 pdf，但是没有第一种方式好。

使用方式

1. 引入类库

    <!-- 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>

2. 实现代码

<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

参考：
方式一：

1. html2pdf
2. 关于html2canvas截断问题的解决方案「PDF分页实现」
3. 基于html2canvas实现网页保存为图片及图片清晰度优化
4. HTML2CANVAS 中文文档
5. 页面直接导出为PDF文件，支持分页与页边距

方式二：

1. Convert HTML to PDF using JavaScript
2. 纯js实现将html转PDF
3. Using html2canvas to write HTML content to canvas to generate pictures
4. html2canvas
5. How to Create Multipage PDF from HTML Using jsPDF and html2Canvas