1. 引入js（这里可以自己去官网下载jspdf  https://parall.ax/products/jspdf）

<script type="text/javascript" src="${ctx }/staticfile/jsPDF/html2canvas_back.js"></script>
<script type="text/javascript" src="${ctx }/staticfile/jsPDF/dist/jspdf.debug.js"></script>

2.调用方法（这里给大家封装好了）：

/*转pdf*/
function toPDF(){html2canvas(document.body, {useCORS:true,onrendered:function(canvas) {//这是文件名var fileName = "${submitExperimentFile.studentSubmitter.majorName}${submitExperimentFile.studentSubmitter.className}-${submitExperimentFile.studentSubmitter.username}${submitExperimentFile.studentSubmitter.name}"+"《${submitExperimentFile.experiment.experimentName}》";var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高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(fileName+'.pdf');}})
}

3.全页面截图：这里给大家一个修改好的js（或者下载我的直接用，亲测可用）：

4.关于图片跨域的问题，可以用一下步骤解决：

• （1） 将页面中的图片全部加上crossorigin = anonymous

 $("img").each(function(index){$(this).attr("crossorigin","anonymous");});

• （2）访问的服务器打开允许跨域访问，如果你是Tomcat可以这样配置：在Tomcat 的conf目录下的web.xml 加入以下代码：

  • <filter><filter-name>CorsFilter</filter-name><filter-class>com.vcooc.experiment.filter.CORSFilter</filter-class>
    </filter><filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>
    </filter-mapping>

    这样转成的pdf就能解决图片跨域问题