Requirements are a function of exporting PDF. The multi-party running has finally been implemented. I have taken many detours, and I suspect that this method is still in a bend now.
There is a jsPDF plugin that can directly generate pdf on the front end, which is very simple, but does not support IE.
front end:
First introduce html2canvas.js
html2canvas(document.body, { //Screenshot object//The detailed parameters can be configured here onrendered: function(canvas) { //The rendering completion callback canvas canvas.id = "mycanvas"; //The base64 image data is generated var dataUrl = canvas.toDataURL('image/png'); //Specify the format, or without parameters var formData = new FormData(); //Mock the form object formData.append("imgData", convertBase64UrlToBlob(dataUrl), "123.png"); //Write the data var xhr = new XMLHttpRequest(); //Data transmission method xhr.open("POST", "../bulletin/exportPdf"); //Configure the transmission method and address xhr.send(formData); xhr.onreadystatechange = function(){ //Callback function if(xhr.readyState == 4){ if (xhr.status == 200) { var back = JSON.parse(xhr.responseText); if(back.success == true){ alertBox({content: 'Pdf exported successfully!',lock: true,drag: false,ok: true}); }else{ alertBox({content: 'Pdf export failed!',lock: true,drag: false,ok: true}); } } } } } } } } } } } } } } } } } } } } } }); //Convert the image url data with base64 to Blobfunction convertBase64UrlToBlob(urlData){ //Remove the url header and convert it to byte var bytes=window.atob(urlData.split(',')[1]); //Defend the exception and convert the ascii code with less than 0 to greater than 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'});}Compatibility: Firefox 3.5+, Chrome, Opera, IE10+
Not supported: iframe, browser plugin, Flash
Cross-domain pictures need to be combined with cross-domain server header to allow cross-domain requests
access-control-allow-origin: * access-control-allow-credentials: true
The svg image cannot be directly supported, there is a patch package, but I haven't tried it.
IE9 does not support FormData data format, nor does it support Blob. In this case, the 64base string generated by canvas will be removed and then passed to the background directly. After the background is received:
String base64 = Img.split(",")[1];BASE64Decoder decode = new BASE64Decoder(); byte[] imgByte = decode.decodeBuffer(base64);rear end:
Import the itext jar package
@RequestMapping("/exportPdf")public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException { ResultData result = new ResultData(); //Custom result format String filePath = "c://exportPdf2.pdf"; String imagePath = "c://exportImg2.bmp"; Document document = new Document(); try{ Map getMap = request.getFileMap(); MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //Get data InputStream file = mfile.getInputStream(); byte[] fileByte = FileCopyUtils.copyToByteArray(file); FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath)); //Open input stream imageOutput.write(fileByte, 0, fileByte.length);//generate local image file imageOutput.close(); PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf file// document.setPageSize(PageSize.A2); 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); //Scaling the image to scale image.setAlignment(Image.MIDDLE); image.scalePercent(percent+3); document.add(image); document.close(); result.setSuccess(true); operatelogService.addOperateLogInfo(request, "Exported successfully: Exported briefing Pdf"); } catch (DocumentException de) { System.err.println(de.getMessage()); } catch (Exception e) { e.printStackTrace(); result.setSuccess(false); result.setErrorMessage(e.toString()); try { operatorlogService.addOperateLogError(request, "Export failed: Server exception"); } catch (Exception e1) { e1.printStackTrace(); } } response.getWriter().print(JSONObject.fromObject(result).toString());} 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;}iText is a well-known open source site sourceforge project, a java class library used to generate PDF documents.
Fast processing speed and supports many PDF "advanced" features.
However, when the Itext error occurs, you will not report an error. You will jump over it and look back at the pdf document and cannot find the cause of the error. It is really a frustration.
Finally, I would like to thank the relevant blog posts and posts on the Internet and Baidu search.
The above article saves the html page as a picture and writes the picture to PDF to achieve the full implementation (recommended) is the entire content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.