從HTM5表單提交產生PDF generate-pdf-from-htm-form-submission
本文將逐步引導您完成從HTML5 (亦稱為Mobile Forms)表單提交產生PDF的步驟。 此示範也會說明將影像新增至HTML5表單及將影像合併至最終pdf所需的步驟。
若要將提交的資料合併至xdp範本，請執行下列動作
撰寫Servlet以處理HTML5表單提交
- 在此servlet內取得提交的資料
- 將此資料與xdp範本合併以產生pdf
- 將pdf串流回呼叫的應用程式
以下是從請求中擷取已提交資料的servlet程式碼。 然後它會呼叫自訂documentServices .mobileFormToPDF方法來取得pdf。
protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) {
StringBuffer stringBuffer = new StringBuffer();
String line = null;
try {
InputStreamReader isReader = new InputStreamReader(request.getInputStream(), "UTF-8");
BufferedReader reader = new BufferedReader(isReader);
while ((line = reader.readLine()) != null)
stringBuffer.append(line);
} catch (Exception e) {
System.out.println("Error");
}
String xmlData = new String(stringBuffer);
Document generatedPDF = documentServices.mobileFormToPDF(xmlData);
try {
InputStream fileInputStream = generatedPDF.getInputStream();
response.setContentType("application/pdf");
response.addHeader("Content-Disposition", "attachment; filename=AemFormsRocks.pdf");
response.setContentLength((int) fileInputStream.available());
OutputStream responseOutputStream = response.getOutputStream();
int bytes;
while ((bytes = fileInputStream.read()) != -1) {
responseOutputStream.write(bytes);
}
responseOutputStream.flush();
responseOutputStream.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
若要將影像新增至行動表單，並在PDF中顯示該影像，我們使用了以下專案
XDP範本 — 在xdp範本中，我們新增了影像欄位和名為btnAddImage的按鈕。 以下程式碼會處理自訂設定檔中btnAddImage的click事件。 如您所見，我們會觸發file1點選事件。 xdp中不需要編碼即可完成此使用案例
$(".btnAddImage").click(function(){
$("#file1").click();
});
自訂設定檔。 使用自訂設定檔可讓您更輕鬆地操控行動表單的HTMLDOM物件。 隱藏的檔案元素會新增至HTML.jsp。 當使用者點選「新增您的像片」時，就會觸發檔案元素的點選事件。 這可讓使用者瀏覽並選取要附加的照片。 然後使用javascript FileReader物件來取得影像的base64編碼字串。 base64影像字串會儲存在表單的文字欄位中。 提交表單時，我們會擷取此值，並將其插入XML的img元素中。 然後使用此XML與xdp合併，以產生最終pdf。
用於本文的自訂設定檔已可供您使用作為本文資產的一部分。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
window.formBridge.setFieldValue("xfa.form.topmostSubform.Page1.base64image",reader.result);
$('.img img').show();
$('.img img')
.attr('src', e.target.result)
.width(180)
.height(200)
};
reader.readAsDataURL(input.files[0]);
}
}
上述程式碼會在我們觸發檔案元素的點選事件時執行。 第5行：我們將上傳檔案的內容擷取為base64字串，並儲存在文字欄位中。 然後，當表單提交至我們的servlet時，就會擷取此值。
然後，我們會在AEM中設定行動表單的下列屬性（進階）
- 提交URL - http://localhost:4502/bin/handlemobileformsubmission。 這是我們的servlet，會將提交的資料與xdp範本合併
- HTML演算設定檔 — 請務必選取「AddImageToMobileForm」。 這會觸發程式碼，將影像新增至表單。
若要在您自己的伺服器上測試此功能，請遵循下列步驟：
-
檢視xdp的屬性頁面，確定送出URL和HTML轉譯器設定檔已正確設定
-
將影像新增至表單並提交。 您應該要取回包含影像的PDF。