1. 程式人生 > >HTML頁面實現可編輯,儲存,並生成PDF,完成簽章。

HTML頁面實現可編輯,儲存,並生成PDF,完成簽章。

原本是應該用pageOffice實現線上開啟word的編輯,儲存,轉換成PDF,並完成簽章,由於公司預算不夠,pageOffice元件不能購買,所以只能另想他法。
需要編輯的word文件的模板是固定的,數量也不多,但對格式要求比較嚴格,所以決定將模板全部做成HTML頁面,用iText元件將HTML轉換成PDF。
需要匯入的jar包:
在這裡插入圖片描述
首先需要將模板做成類似於下面這樣的頁面,橫線上的資料是可以動態填充,編輯的,填充資料可以使用Freemarker
在這裡插入圖片描述
使頁面可編輯可以使用Html的contenteditable=“true”在這裡插入圖片描述
由於頁面是可以動態編輯的,所以我們需要獲得編輯後的頁面的原始碼

var outerHTML = document.documentElement.outerHTML;

這裡要注意,頁面中的所有標籤都是需要閉合的,如果不閉合的話iText元件在轉換過程中會報錯,頁面中的字型需要是宋體,因為iText的轉換需要有字型檔案的支援,所以你同時需要在專案中或者伺服器上準備一個字型檔案
在這裡插入圖片描述
body {
margin: 20px;
font-family:SimSun;
}
下面是後臺接收到頁面原始碼後的處理

@RequestMapping("acceptPage")
	@ResponseBody
	public Map acceptPage(HttpServletRequest request) throws Exception {
		Map map=new HashMap();
		String text = request.getParameter("text");
		//使用jsoup來對html原始碼進行解析,能夠校驗格式的完整性,並生成一個新的Document
		org.jsoup.nodes.Document parse = Jsoup.parse(text);
		Elements meta = parse.getElementsByTag("meta");
		String html = parse.html();
		for (Element link : meta) {//手動為一些標籤新增閉合
			String s = link.outerHtml();
			String s1=s.replace("/>",">");
			html=html.replace(s,s1+"</meta>");
		}
		Elements link1 = parse.getElementsByTag("link");
		for (Element link : link1) {
			String s = link.outerHtml();
			String s1=s.replace("/>",">");
			html=html.replace(s,s1+"</link>");

		}
		html=html.replaceAll("&nbsp;","");
		try {
			String outputFile="E:\\test.pdf";
			OutputStream os = new FileOutputStream(outputFile);
			//中文宋體檔案路徑
			String fontPath=StringUtil.trimSufffix(fontUrl, File.separator)+File.separator+"simsun.ttc";
			//String fontPath= "C:\\simsun.ttc";
			ITextRenderer render = new ITextRenderer();
			ITextFontResolver fontResolver = render.getFontResolver();
			fontResolver.addFont(fontPath, BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
			render.setDocumentFromString(html);
			render.layout();
			render.createPDF(os);
			os.close();
		} catch (Exception e) {
			e.printStackTrace();
			map.put("state",1);
			map.put("msg","檔案轉換失敗!請聯絡管理員!");
			return map;
		}
	}

後面是對生成PDF檔案進行簽章的操作,就不再說了
在這裡插入圖片描述
這是最終生成的PDF,樣式是沒有問題的,也實現了可編輯,儲存的功能。