.NET Core MVC:为网页嵌入的PDF添加打印按钮的实现方法
实现嵌入PDF的网页打印按钮功能
针对你用.NET Core MVC/Razor Pages嵌入PDF的场景,以下两种方案可以实现打印按钮功能:
方案一:直接调用嵌入PDF的打印方法
这种方式无需跳转,直接在当前页面触发PDF打印:
- 修改后台嵌入代码:给
<object>标签添加唯一ID,方便JavaScript获取元素
修改后台的embed字符串,新增id="pdfObject"属性:
using (MemoryStream stream = new MemoryStream()) { // 新增id属性用于JS定位 string embed = "<object id=\"pdfObject\" data=\"{0}\" type=\"application/pdf\" width=\"1000px\" height=\"1000px\">"; embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>"; embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file."; embed += "</object>"; TempData["Embed"] = string.Format(embed, "/FilledPDFFiles/Confidentiality Statement" + ".pdf"); return View(); }
- 在视图中添加打印按钮与JS逻辑
在你的视图页面(如.cshtml文件)中,先输出嵌入的PDF,再添加打印按钮和JavaScript:
<!-- 输出嵌入的PDF --> @Html.Raw(TempData["Embed"]) <!-- 打印按钮 --> <button id="printPdfBtn">打印PDF</button> <script> document.getElementById('printPdfBtn').addEventListener('click', function() { const pdfObj = document.getElementById('pdfObject'); // 兼容不同浏览器的PDF对象调用方式 if (pdfObj.contentWindow) { pdfObj.contentWindow.print(); } else if (pdfObj.print) { pdfObj.print(); } else { alert('当前浏览器不支持直接打印嵌入PDF,请下载后打印'); } }); </script>
方案二:新开窗口加载PDF并打印
这种方案兼容性更强,适合对嵌入PDF打印支持不佳的浏览器:
无需修改后台代码,直接在视图中添加按钮和JS逻辑:
<!-- 输出嵌入的PDF --> @Html.Raw(TempData["Embed"]) <!-- 打印按钮 --> <button id="printPdfNewWindowBtn">打印PDF</button> <script> document.getElementById('printPdfNewWindowBtn').addEventListener('click', function() { const pdfUrl = '/FilledPDFFiles/Confidentiality Statement.pdf'; // 新开窗口加载PDF const pdfWindow = window.open(pdfUrl, '_blank'); // 等待PDF加载完成后触发打印 pdfWindow.onload = function() { pdfWindow.print(); // 可选:打印完成后自动关闭窗口(部分浏览器可能需要用户交互) // setTimeout(() => pdfWindow.close(), 1500); }; }); </script>
注意事项
- 确保PDF文件路径
/FilledPDFFiles/Confidentiality Statement.pdf在服务器上可访问,若涉及权限验证,需保证新开窗口的请求携带用户身份信息 - 部分浏览器可能会拦截弹窗,需提示用户允许弹出窗口
- 若PDF文件较大,
onload事件可能需要适当延迟,确保PDF完全加载
内容的提问来源于stack exchange,提问作者rimi
相关产品推荐
相关产品推荐

