如何在PDF.js自定义查看器显示服务器PDF？JS获取HiddenFor值为undefined

核心问题 #

你用document.getElementById('#ConstructedLinkToPdfDocumentForPDFJS')获取值为undefined的原因很明确：原生JS的getElementById不需要加#前缀，#是jQuery选择器的语法，原生方法直接传ID字符串即可。

分步解决 #

1. 修正原生JS选择器写法
   把代码改成：

   const pdfLink = document.getElementById('ConstructedLinkToPdfDocumentForPDFJS').value;
   

2. 确认生成的HTML元素ID是否正确
   打开浏览器开发者工具（F12），查看页面渲染后的hidden input元素，确认它的id属性值是否真的是ConstructedLinkToPdfDocumentForPDFJS。MVC的Html.HiddenFor可能会根据模型嵌套关系自动添加前缀（比如父模型名为Document的话，ID可能变成Document_ConstructedLinkToPdfDocumentForPDFJS）。

3. 用MVC辅助方法动态获取正确ID（推荐）
   为了避免手动写ID出错，直接在JS里嵌入MVC生成的正确ID：

   // 动态获取HiddenFor生成的实际ID
   const pdfInputId = '@Html.IdFor(m => m.ConstructedLinkToPdfDocumentForPDFJS)';
   const pdfUrl = document.getElementById(pdfInputId).value;
   
   // 之后传给PDF.js使用
   pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
       // 你的PDF渲染逻辑
   });
   

4. 确保JS在DOM加载完成后执行
   如果你的JS代码放在页面头部，要包裹在DOM加载完成的回调里，避免元素还未渲染就尝试获取：

   document.addEventListener('DOMContentLoaded', function() {
       const pdfInputId = '@Html.IdFor(m => m.ConstructedLinkToPdfDocumentForPDFJS)';
       const pdfUrl = document.getElementById(pdfInputId).value;
       // PDF.js初始化逻辑
   });
   

额外注意点 #

• 确认模型的ConstructedLinkToPdfDocumentForPDFJS属性确实有值，可以在cshtml里直接输出@Model.ConstructedLinkToPdfDocumentForPDFJS验证。
• 如果PDF链接是跨域的，要确保专用服务器配置了CORS允许当前网站访问，否则PDF.js会加载失败。

内容的提问来源于stack exchange，提问作者SomeKindaHooty