项目开发过程中有打印预览的需求,前端需要传入利用get方式传递参数给后端,但传递过多的参数get地址栏是不行的,只能利用post方式去实现。
1、get方式
通常打印预览方式:
const {courseData: {id, courseType}} = this.props; const requestUrl = `${cmisEmr}/EmrCourseSelectController/printEmrCourse?id=${id}&time=${new Date().getTime()}`; window.open(requestUrl, '_blank');
2、post方式
原理: 创建一个隐藏form表单,通过form表单的提交刷新功能,实现打印预览。
说明:form表单提交(非ajax模拟),默认会在本窗口打开,可以使用taget属性,设置在新窗口中打开,如:
<form name="loginform" action='url' method="post" target="_blank"></form>
// params是post请求需要的参数,url是请求url地址 wanglong 2020.9.27 export function postPdfFile(params, url) { var form = document.createElement("form"); form.style.display = 'none'; form.action = url; form.method = "post"; form.target = "_blank"; document.body.appendChild(form); for(var key in params){ var input = document.createElement("input"); input.type = "hidden"; input.name = key; input.value = params[key]; form.appendChild(input); } form.submit(); form.remove(); }
请求样例:
handleBatchDrugsPrint = () => { const {allPrintList} = this.state; const list = []; for (let i = 0, len = allPrintList.length; i < len; i++) { list.push(allPrintList[i].ids); } const params = {idList: list.join(","), printType: 1, token: `${cookie.load('token')}`}; const url = `${cmisHos}/HosNurseExecutSelectController/printWorkbenchMed`; postPdfFile(params, url); }
@PostMapping("printWorkbenchMed") public void printWorkbenchMed(@RequestParam(value = "idList", required = true) String idList, @RequestParam(value = "printType", required = true) String printType, @RequestParam(value = "token", required = true) String token, HttpServletResponse response) { iHosNurseExecutSelectBusi.printWorkbenchMedByType(idList, printType, token, response); }