前端jspdf生成PDFbase64格式的字符串通过ajax传输后台生成PDF文件

前端JS框架：AngularsJS

前后端交互：Ajax

后端技术：Java

相关代码：

HTML代码片段：

<button ng-click="generatePdf()">生成账单</button>
<div id="zero">HelloWorld</div>
<script src="static/libs/jsPDF-master/dist/jspdf.debug.js"></script>
<script src="static/libs/jsPDF-master/dist/jspdf.min.js"></script>
<script src="static/libs/jsPDF-master/dist/html2canvas.js"></script>

JS代码片段：

    // 生成PDF
    $scope.generatePdf = function() {
    	$('#zero').css("background", "#fff");
		html2canvas($('#zero'), {
			  onrendered:function(canvas) {


			      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 = 595.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();
			              }
			          }
			      }
			      $scope.nowPdfData = pdf.output("datauristring");
			      generatePdf();
			      // 此方法直接可直接提供PDF下载
			      // pdf.save('hello.pdf');
			  }
		})
    }
 
    /**
     * 传输后台
     */
    function generatePdf() {
    	$.ajax({
        	url : BASE_URL + '/after/ex/billClient/uploadBillClient',
        	type : "POST",
        	data : {
        		fileName : $scope.nowPdfData + ''
        	}
        }).success(function(result) {
        	$scope.$apply(function() {
        		if(result.success) {
        			layer.msg(result.msg);
        		} else {
        			layer.msg(result.msg);
        		}
        	})
        })
    }

JAVA代码片段：

	/**
	 * 生成PDF文件
	 * 
	 * @author shilun.zhan
	 * @date 2018年2月23日 上午10:40:23
	 * @param request
	 * @param attachments
	 *            PDFbase64格式的字符串
	 * @return
	 */
	@RequestMapping(value = "uploadBillClient", method = RequestMethod.POST)
	@ResponseBody
	public Result uploadBillClient(HttpServletRequest request,
			@RequestParam(value = "fileName", required = false) String attachments) {
		if (attachments == null) {
			return ResultUtils.returnError("生成PDF失败");
		}
		BASE64Decoder decoder = new BASE64Decoder();
		try {
			// Base64解码
			byte[] b = decoder.decodeBuffer(attachments);
			for (int i = 0; i < b.length; ++i) {
				// 调整异常数据
				if (b[i] < 0) {
					b[i] += 256;
				}
			}
			String imgFilePath = "f://hello.pdf";
			OutputStream out = new FileOutputStream(imgFilePath);
			out.write(b);
			out.flush();
			out.close();
		} catch (Exception e) {
			logger.error(e.getMessage(), e);
			return ResultUtils.returnError("生成PDF失败");
		}
		return ResultUtils.returnSuccess("生成PDF成功");
	}

前端插件：jspdf，html2canvas

参考资料：https://www.jianshu.com/p/570c84ee2e8d