web开发HTML生成PDF的三种解决方案（服务器端mpdf、html2canvas.js、浏览器打印、PDF虚拟打印机）

2023-07-25 783

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web开发HTML生成PDF的三种解决方案（服务器端mpdf、html2canvas.js、浏览器打印、PDF虚拟打印机）

前言

在web网页中加载并显示PDF文件是最常见的业务需求，目前浏览器大多数都自带pdf预览功能，但是每个浏览器的pdf加载器并不一样，工具栏也无法定制化。为了统一不同浏览器pdf预览的一致性，并增加一些自定义功能，需要在实际的项目开发过程中根据不同的情况进行pdf文档的生产。

一、服务器端生成PDF

mPDF是一个PHP类库，它由UTF-8编码的HTML生成PDF文件。它基于FPDF和HTML2FPDF ，再此基础上添加了许多功能。同时对css支持能力得到了大的提升，支持css样式的引入。mPDF生成类库的步骤如下：

1.开发对应HTML页面

如公开地址：http://test.com/index.php?m=Index&a=projectTable&act=showTable&zp_id=2

2.curl对应的HTML页面

/*
 1. 爬取
 2. $url,服务器地址;
 3. $header,文件头;
 4. $data,数据,array();
*/
function get_url($url)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    /*自适应SSL证书*/
    if (1 == strpos("$" . $url, "https://")) {
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    }
    $response = curl_exec($ch);
    curl_close($ch);
    return $response;
}

3.生成PDF文档

/*打印PDF详情页
 5. $url, 域名;
 6. $pro_id, 项目Id;
 7. $pro_types,机构类型；
 8. $waterMark,水印文字；
 9. $pro_serial，项目编号;
*/
function printPdf($url, $zp_id, $user_name, $waterMark)
{
    require_once("libs/mpdf/mpdf.php");
    $mpdf = new mPDF('utf-8', 'A4', '', '宋体', 0, 0, 20, 10);
    //$mpdf->shrink_tables_to_fit = 0;
    //添加水印;
    $mpdf->SetWatermarkText($waterMark, 0.1);//水印文字，透明度
    $mpdf->showWatermarkText = true; //开启水印
    if (preg_match("/([\x81-\xfe][\x40-\xfe])/", $waterMark, $match)) {
        $mpdf->watermark_font = 'GB';
    }
    //获取内容;
    $mpdf->useAdobeCJK = true;
    $html = get_url($url . '?m=Index&a=projectTable&act=showTable&zp_id=' . $zp_id);
    //设置PDF页眉内容
    //$header = '<table width="95%" style="margin:0 auto;border-bottom: 1px solid #4F81BD; vertical-align: middle; font-family:serif; font-size: 9pt; color: #000088;"><tr><td width="10%"></td><td width="80%" align="center" style="font-size:16px;color:#A0A0A0"></td><td width="10%" style="text-align: right;">山东精品课程申报系统</td></tr></table>';
    //设置PDF页脚内容
    $footer = '<table width="100%" style="vertical-align: bottom; font-size: 9pt; color: #000;"><tr style="height:30px"></tr><tr><td width="10%"></td><td width="80%" align="center" style="font-size:14px;color:#000"></td><td width="10%" style="font-size:14px;color:#000;">页码: {PAGENO} / {nb}</td></tr></table>';
    //添加页眉和页脚到pdf中
    //$mpdf->SetHTMLHeader($header);
    $mpdf->SetHTMLFooter($footer);
    //设置pdf显示方式
    $mpdf->SetDisplayMode('fullpage');
    //创建pdf文件
    $mpdf->WriteHTML($html);
    //输出pdf
    $mpdf->Output($user_name . '.pdf', 'I');//'D'；下载模式
    exit;
}

4.注意事项

在读取html文档时，一般可以使用file_get_contents函数，但是如果访问量过大时，会造成CPU负荷多大，导致服务器宕机；

通过curl封装get_url($url)函数，在一定的程度上解决CPU负荷的问题；

如果爬取的文档内容不多，最彻底的解决方案：是在printPdf($url, $zp_id, $user_name, $waterMark)函数中做HTML和PHP混排；

生成的内容是文字，可以复制；

爬取内容时，如果对应的页面有用户登录权限，必须赋权访问,如：CURL获取cookies模拟登录的方法；

mpdf在自动分页上有很明显的优势，但在使用table布局时，大段落文字会出现压缩的情况，建议使用div布局。

二、html2canvas.js库

1.引入库html2canvas库

    <script type="text/javascript" src="static/rooted/js/html2canvas.min.js"></script>
    <script type="text/javascript" src="static/rooted/js/jspdf.min.js"></script>
    <script type="text/javascript" src="static/rooted/js/h2pdf.js"></script>

2.设置页面大小尺寸

案例默认使用A4大小。

/*表格打印*/
.page_width {
    width: 595.32pt;
}
.page {
    position: relative;
    margin: 0 auto;
}
#printId {
    width: 98%;
    height: 720pt;
    background: #FFF;
    color: #000;
    font-size: 16px;
}
/*控制表格内容宽高，防止被拉伸*/
.content_p {
    text-align: center;
    padding-top: 5px;
}
.content_p > table {
    width: 98%;
}
td {
    height: 30px;
    padding: 5px;
}
.title_td {
    font-weight: bold;
    text-align: center;
}
.verimg {
    position: absolute;
    right: 0px;
    top: 10px;
    z-index: 9999;
    transform: rotate(30deg)
}

3.HTML布局

<div class="page page_width">
    <div id="printId">
        <div class="content_p" id="content_p">
            <table  align="center" border="1" cellpadding="0">
                <tr>
                    <td colspan="4" class="title_td" style="font-size: 32px;padding: 10px;">山东省中医临床优秀人才选拔考试准考证</td>
                </tr>
                <tr>
                    <td colspan="4" class="title_td">身份信息</td>
                </tr>
                <tr>
                    <td align="center">准考证号</td>
                    <td colspan="2" align="center">SDYX001</td>
                    <td rowspan="6" align="center"><img width="160" height="242" src="upload/2022-06/SDYX001.jpg"></td>
                </tr>
                <tr>
                    <td align="center">姓名</td>
                    <td colspan="2" align="center">介保良</td>
                </tr>
                <tr>
                    <td align="center">性别</td>
                    <td colspan="2" align="center">男</td>
                </tr>
                <tr>
                    <td align="center">职称</td>
                    <td colspan="2" align="center">执业医师</td>
                </tr>
                <tr>
                    <td align="center">身份证号</td>
                    <td colspan="2" align="center">******</td>
                </tr>
                <tr>
                    <td align="center">工作单位</td>
                    <td colspan="2" align="center">中医院</td>
                </tr>
                <tr>
                    <td colspan="4" class="title_td">考试安排</td>
                </tr>
                <tr>
                    <td class="title_td">考试科目</td>
                    <td class="title_td">考试时间</td>
                    <td class="title_td">考试地点</td>
                    <td class="title_td">考场/座号</td>
                </tr>                              
            </table>
        </div>
    </div>
</div>

4.下载PDF文档

<div class="print_btn">
    <button type="button" class="layui-btn layui-btn-normal" onclick='printOut("lockdatav")'>下载PDF文档</button>
    <a type="button" id="ps" class="layui-btn layui-btn-normal" href="?m=Index&a=ticket&act=exam" target="_blank">网页版打印</a>
</div>

5.封装事件函数

    var ps = document.getElementById('ps');
    function preview(id) {
        var sprnhtml = $('#' + id).html(); //获取区域内容
        var selfhtml = $('body').html(); //获取当前页的html, 用来恢复页面
        $('body').html(sprnhtml);
        window.print();
        $('body').html(selfhtml);
    }
    ps.onclick = function () {
        preview('content_p');
    }

6.注意事项

PDF在浏览器端生成，减少了对服务器的压力；
生成的PDF实际上是canvas画布base64图片，文字无法复制；
如果是多页时，实现分页比较麻烦。

三、PDF虚拟打印机

使用浏览器自带的PDF虚拟打印机将网页打印成PDF格式：

打开需要保存或打印成PDF的网页，然后右击鼠标选择“打印”，或者直接利用Ctrl+P快捷键进入打印页面。

在弹出的对话框中，选择“闪电PDF虚拟打印机”，再点击“打印”；

选择“PDF”即可，同时，还可以对其他选项进行修改，如文件名、导出路径等。

选择“导出”；

已经成功将网页打印成PDF格式了；

双击打开文件查看效果；

总结

在web端生成pdf时，三种方法针对不同的场景各有利弊。

@漏刻有时