【使用html2pdf将页面生成PDF文件】

前端使用html2pdf将页面生成PDF文件

一、下载js文件
链接: (https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js).

二、引入js文件

<script type="text/javascript" src="<c:url value="/scripts/channelAuthentication/html2pdf.bundle.min.js" />"></script>;

这里填写自己项目中文件路径

三、添加生成PDF触发事件

<button  onclick="dowmloadPdf()">下载pdf</button>

四、调用JavaScript生成PDF

1、打印的区域

<div id="exportContent" >
<%-- 打印区域 --%>
......
</div>

2、调用JavaScript

<script type="text/javascript">
    function dowmloadPdf() {
        var element=document.getElementById('exportContent'); //需要打印的块级
        var opt = {
            margin:       0.15, //页面上边距
            filename:     'XXX.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 3 }, //清晰度
            jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
        };
        html2pdf(element, opt);  // 将 PDF 文件保存到本地
    }
</script>

说明：这里可以自己调整页边距，和清晰度