前端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