直接上代码了
前端代码:
<html> <head> <title>Title</title> </head> <body> <input type="button" value="截图" οnclick="takeScreenshot()"> <div id="view"> <div id="mycanvas"> </div> </div> </body></html>
引用得js
<script type="text/javascript" src="application/career/explore/js/html2canvas.js"></script> <script type="text/javascript" src="application/career/explore/js/jsPdf.debug.js"></script>
<script> jQuery(document).ready(function() { jQuery.get(contextPath + "/application/career/selfWork/myInterest/new_detail.jsp",function(html){ jQuery("#mycanvas").html(html); }); }); function takeScreenshot() { html2canvas(document.getElementById("mycanvas")).then(function(canvas) { document.body.appendChild(canvas); canvas.id = "mycanvas"; // 生成base64图片数据 var dataUrl = canvas.toDataURL('image/png'); //指定格式,也可不带参数 var formData = new FormData(); //模拟表单对象 formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //写入数据 var xhr = new XMLHttpRequest(); //数据传输方法 xhr.open("POST", "./exportPdf.do"); //配置传输方式及地址 xhr.send(formData); xhr.onreadystatechange = function() { //回调函数 if(xhr.readyState == 4) { if(xhr.status == 200) { var back = JSON.parse(xhr.responseText); if(back.success == true) { alertBox({ content: 'Pdf导出成功!', lock: true, drag: false, ok: true }); } else { alertBox({ content: 'Pdf导出失败!', lock: true, drag: false, ok: true }); } } } } }); } function downpdf(){ html2canvas(document.getElementById("mycanvas"), { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 595.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 555.28; var imgHeight = 555.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPG', 20, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save('content.pdf'); } }) } //将以base64的图片url数据转换为Blob function convertBase64UrlToBlob(urlData) { //去掉url的头,并转换为byte var bytes = window.atob(urlData.split(',')[1]); //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for(var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: 'image/png' }); } </script>第一个方法是将数据传到后台保存起来
第二个方法是在前端利用pdf.js将网页直接下载为pdf
下面粘贴出后台得代码:
@Controller public class TestController2 extends CommonController{ @RequestMapping("/exportPdf") public void exportPdf(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception { ResultData result = new ResultData(); //自定义结果格式 String filePath = "e:\\111.pdf"; String imagePath = "e:\\111.bmp"; Document document = new Document(); // Document document = new Document(PageSize.A4, 20, 20, 20, 20); try{ Map getMap = request.getFileMap(); MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //获取数据 InputStream file = mfile.getInputStream(); byte[] fileByte = FileCopyUtils.copyToByteArray(file); FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打开输入流 imageOutput.write(fileByte, 0, fileByte.length);//生成本地图片文件 imageOutput.close(); FileOutputStream fileOutputStream = new FileOutputStream(filePath); PdfWriter.getInstance(document,fileOutputStream); //itextpdf文件 // document.setPageSize(PageSize.A4); document.setPageCount(2); Rectangle pageSize = new Rectangle(595.0F, 842.0F*4); document.setPageSize(pageSize); document.open(); // document.add(new Paragraph("JUST TEST ...")); Image image = Image.getInstance(imagePath); //itext-pdf-image float heigth = image.getHeight(); float width = image.getWidth(); int percent = getPercent2(heigth, width); //按比例缩小图片 image.setAlignment(Image.MIDDLE); // image.scaleAbsolute(mmTopx(150), mmTopx(500));// 直接设定显示尺寸 image.scalePercent(percent+3); document.add(image); document.close(); result.setSuccess(true); }catch (DocumentException de) { System.err.println(de.getMessage()); } catch (Exception e) { e.printStackTrace(); result.setSuccess(false); } sendJsonMessage(response,result); } private static int getPercent2(float h, float w) { int p = 0; float p2 = 0.0f; p2 = 530 / w * 100; p = Math.round(p2); return p; } public static int getPercent(float h, float w) { int p = 0; float p2 = 0.0f; if (h > w) { p2 = 297 / h * 100; } else { p2 = 210 / w * 100; } p = Math.round(p2); return p; } public static float mmTopx(float mm){ mm = (float) (mm *3.33) ; return mm ; } }
后台代码得内容主要是将图片转化为pdf。需要引入得包有:iText-2.1.7.jar,iTextAsian.jar ,这里关键是让图片以什么样得缩放比例转化成pdf,这里还需要自己去调试,我也找不到一个完美得方法。
Rectangle pageSize = new Rectangle(595.0F, 842.0F*4);
image.scalePercent(percent+3);
核心就是选择纸张大小,和图片得缩放比例了
// image.scaleAbsolute(mmTopx(150), mmTopx(500));// 直接设定显示尺寸
也可以直接设定尺寸