摘要：说明工厂产品页嵌入图纸预览时如何处理手机兼容、文件格式、下载兜底、版本标识和访问权限，并通过状态码与真实设备验收，避免客户看到空白区域。
产品页把安装图纸放进iframe后，电脑浏览器能看到，采购人员用手机打开却只剩一块空白。页面没有文件名称、版本和下载入口，销售只能重新从聊天工具发送附件。图纸预览应当是阅读便利项，页面还要提供清楚的文件信息和可用兜底，不能把访问能力押在一个嵌入框上。
预览框为什么会在手机端变成空白
iframe能否显示，取决于文件格式、浏览器能力和服务器响应。PDF通常可以在桌面端内嵌阅读，但部分手机浏览器会直接下载，或把预览交给系统组件。DWG、DXF这类源文件更不能依赖浏览器原生打开。若页面只留一个固定高度的框，加载失败后不会自动出现替代内容，客户看到的就是空白区域。
服务器响应也会改变结果。文件返回404自然无法预览；返回302跳到登录页时，嵌入框可能显示登录页面；若响应头要求作为附件下载，浏览器也不会在框内展开。图纸地址还可能经过临时签名，链接过期后产品页仍在，文件请求却返回403。排查时要分别记录页面状态码和文件状态码，不能只确认产品页返回200。
固定宽度是另一类问题。设计人员按A3横向图纸设置了900像素宽的预览区，手机视口只有390像素，嵌入内容便会横向溢出。外层容器应限制最大宽度，预览高度按视口调整；加载提示不能压住标题和操作入口。预览组件即使不可用，也不应撑开页面或阻断正文滚动。
页面怎样同时安排预览与下载兜底
适合公开阅读的版本可转成PDF，源文件是否提供则按业务权限决定。页面应显示图纸名称、适用型号、版本号、发布日期、文件格式和大小。例如“AX20安装尺寸图，R4，PDF，1.8 MB”，这些字段来自文件记录，不从上传文件名临时截取。客户在下载前就能判断是不是自己要找的版本。
预览区下方保留明确的下载链接，并在链接旁注明文件类型。iframe元素内部可以放一段替代内容，提示浏览器无法预览时使用下载入口。对需要授权的图纸，不要把真实文件地址直接写在公开源码里；按钮先进入权限校验，再返回有效文件。授权失败应给出可理解的页面提示，不要只返回一段接口错误。
下载入口应使用真实链接，不能只绑定鼠标点击脚本。客户关闭脚本、使用键盘或从邮件中打开链接时，仍应到达同一文件。服务器要返回与文件一致的类型，PDF不能标成普通网页。文件较大时可显示大小，但不要在点击后才弹出一个没有关闭方式的遮罩层。
文件记录可包含drawing_id、model_scope、revision、public_format、source_format和access_level。PDF与DWG属于同一张图时，共用drawing_id，版本号保持一致。技术部门换版后新增R5记录，R4继续服务历史订单，不用新文件覆盖旧地址。销售转发链接时也能说明当前版本和适用型号。
上线前怎样验收图纸入口
验收要使用真实手机，不只缩窄电脑窗口。至少检查安卓和iPhone常用浏览器：页面能否滚动，预览失败时下载入口是否仍可见，文件名是否正常，下载后能否打开。再断开登录状态测试受限文件，确认访客不会绕过权限，也不会被送到没有返回路径的登录页。
网络条件也要纳入用例。把速度限制到较慢档位，观察加载提示是否出现，超时后页面能否继续阅读。分别测试PDF存在、文件404、签名过期和文件体积较大的情况。浏览器控制台报错可帮助定位嵌入限制，但最终判断仍以客户能否获得正确图纸为准。
发布后从产品页入口走一遍完整路径，核对H1下方的适用型号、图纸版本和下载文件一致。网站日志应区分页面访问与文件请求，方便发现大量页面访问却没有成功取文件的异常。预览成功率无法保证时，稳定的下载兜底和版本字段会让客户仍能完成查图任务。
