記一次PDF預覽頁面增加水印

思路

開發公司的車間在線讀圖系統，PDF預覽頁面用的是簡睿捷文檔發放系統的不用登錄預覽頁面，領導說預覽頁面需要增加logo，ip，日期和時間水印，並且混淆瀏覽器的頁面地址。

---

水印的前端代碼在網上很容易找到，可是js是無法獲取客戶端的ip地址。突然想到之前給預覽界面增加了操作日志，每次打開PDF預覽頁面都會ajax發送http請求保存操作日志，記錄登錄用戶的用戶名，掃描的圖紙號，ip地址等等。所以在這個不用登錄的預覽頁面同樣發送post請求保存操作日志，后台獲取ip地址返回，水印顯示功能寫在ajax的success函數里面，接口參數增加操作來源，就可以區分預覽操作是來自簡睿捷文檔發放系統還是來自車間讀圖系統。

---

前端代碼

隱藏地址欄參數

//隱藏地址欄參數
window.onload = function(){
  window.history.pushState({}, 0, "BrowsePDF......");
}
// 保存預覽操作的日志
function saveOperation() {
   var docuid = getQueryString("docid");
   // var userid = localStorage.getItem("userid");;
   $.ajax({
        async: false,
        type: "POST",
        url: "http://192.168.10.83:8080/readbarcode/myande/saveoperation",
        data: {
          "docid": docuid,
          "optionsource": 1
        },
        dataType: "json",
        success: function (data) {
          //展示水印
          var now = getNow();
          watermark({ "watermark_txt": "" + data.ip + "  " + now });
        },
        error: function (e) {
          //展示水印
          var now = getNow();
          watermark({ "watermark_txt": "" + data.ip + "  " + now });
        }
    })
}

//在原水印的基礎上增加logo：將logo轉化成base64
mask_div.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAAAzCAYAAADFAxXIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAMM2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE0LTA5LTE5VDA5OjA5OjE4KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNy0wOVQwODo0NDoxNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wNy0wOVQwODo0NDoxNyswODowMCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjU1MTcwNzY2LWFlNjUtM2M0NC05NzA0LTNlNjc0YzUzMGZkZiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NzdmYTIzNC1hZTE1LWZkNDgtODI5Ny04MzczMWFkZjdhY2QiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0idXVpZDowNjMyRjA4NDk5M0ZFNDExOTkxNzkxNTI4MUM2OUMzOSIgcGhvdG9zaG9wOkxlZ2FjeUlQVENEaWdlc3Q9IkM3NUQxN0U1NzRCNTZFRjVEQkJFMzk5NEMwRTk3OTVDIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6SW1hZ2VXaWR0aD0iMjE0NiIgdGlmZjpJbWFnZUxlbmd0aD0iMTU1MCIgdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPSIyIiB0aWZmOk9yaWVudGF0aW9uPSIxIiB0aWZmOlNhbXBsZXNQZXJQaXhlbD0iMyIgdGlmZjpZQ2JDclBvc2l0aW9uaW5nPSIxIiB0aWZmOlhSZXNvbHV0aW9uPSI3MjAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjcyMDAwMC8xMDAwMCIgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIgZXhpZjpFeGlmVmVyc2lvbj0iMDIyMCIgZXhpZjpDb2xvclNwYWNlPSIxIiBleGlmOlBpeGVsWERpbWVuc2lvbj0iMjE0NiIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjE1NTAiIGV4aWY6U3ViU2VjVGltZT0iMTc3Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvanBlZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTg5OEMxRjFEMjlCRTkxMTg3MUFGRDJFRjJGQTlCNDAiIHN0RXZ0OndoZW49IjIwMTktMDctMDFUMTc6MTM6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3OTljZDYxMS0wN2I2LTdmNDEtYmUyNi1jMDk2YzhiZGE3ODIiIHN0RXZ0OndoZW49IjIwMjAtMDUtMjhUMDk6NTY6MzkrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGltYWdlL2pwZWcgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBpbWFnZS9qcGVnIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjM1MWExZDAtNWJiMS1lZjRlLTlmYTUtNDkxZjA1ODZmZjA3IiBzdEV2dDp3aGVuPSIyMDIwLTA1LTI4VDA5OjU2OjM5KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg3N2ZhMjM0LWFlMTUtZmQ0OC04Mjk3LTgzNzMxYWRmN2FjZCIgc3RFdnQ6d2hlbj0iMjAyMS0wNy0wOVQwODo0NDoxNyswODowMCIgc3RFdnQ6c29m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')";
//mask_div.style.backgroundPositionX = "center";
//mask_div.style.backgroundPositionY = "center";
mask_div.style.backgroundRepeat = "no-repeat";
mask_div.style.backgroundPosition = "-1% 3%";
mask_div.style.lineHeight = "8";

后台代碼

@RequestMapping(value = "/myande/saveoperation", method = RequestMethod.POST)
	@ResponseBody
	@CrossOrigin
	public JSONObject saveOperation(@RequestParam("docid") String docid, @RequestParam(value = "userid", required = false) String userid,
			@RequestParam(value = "optionsource", required = false) String optionsource, HttpServletRequest request, HttpServletResponse response)
	{
		JSONObject jsonObject = new JSONObject();
		String ipAddress = IpUtil.getIpAddr(request);
		jsonObject.put("ip", ipAddress);

		try
		{
			// 車間讀圖頁面獲取ip地址(此處不需要重復保存日志)
			if (StringUtils.isEmpty(optionsource))
			{
				String materialNo = secondreadBarcodeService.getMaterialNoById(docid);
				if (!StringUtils.isEmpty(materialNo))
				{
					saveQueryLog("", ipAddress, materialNo, OperationSource.簡睿捷文檔發放系統, userid);
					jsonObject.put("status", 1);
					jsonObject.put("msg", "日志保存成功");
				} else
				{
					jsonObject.put("status", 2);
					jsonObject.put("msg", "日志保存失敗");
				}
			}

		} catch (Exception e)
		{
			e.printStackTrace();
			jsonObject.put("status", 3);
			jsonObject.put("description", e.toString());
		}
		return jsonObject;
	}

效果圖