您的位置:首页 > 房产 > 建筑 > 前端返回pdf时不显示内容,如何解决?

前端返回pdf时不显示内容,如何解决?

2024/10/5 20:23:11 来源:https://blog.csdn.net/weixin_43970743/article/details/140003731  浏览:    关键词:前端返回pdf时不显示内容,如何解决?

🏆本文收录于《CSDN问答解答》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!

问题描述

  plm有返回esop地址浏览器能正常打开,却在系统打开时不显示?如下代码:

$scope.openESOP=function(item){$mdDialog.serviceDialog('B0212AService',item);};
if(dialog.currentFile.content_type == '3'){//網頁//dialog.currentFile.esop_content = "https://i.stack.imgur.com/iIvCA.png";// 20200727 modify by shiwl for M#0147529: 测试区读取到PLM图纸后,文件不显示,但PLM端可以正常打开setTimeout(() => {document.getElementById('kmi-pdf-panel').src =  dialog.currentFile.esop_content+'&openfile=false&viewbookmark=false&print=false&download=false#zoom=page-width';  }, 500);
}

如上问题有来自我自身项目开发,有的收集网站,有的来自读者,如有侵权,立马删除。

解决方案

  如下是上述问题的解决方案,仅供参考:

  在提供的代码片段中,您正在尝试使用 AngularJS 框架通过 $mdDialog 服务打开一个对话框,并且在某些条件下,您尝试在 iframe 中加载一个 PDF 文件。如果 PDF 文件在浏览器中能够正常打开,但在您的系统中不显示,这可能是由几个原因造成的:

  1. 路径问题:确保 dialog.currentFile.esop_content 变量中的 URL 是正确的,并且指向了正确的 PDF 文件。

  2. iframe 的安全性:某些浏览器可能会阻止从不同的源(不同的协议、域名或端口)加载 iframe 内容,这称为“同源策略”。如果 PDF 服务器和您的应用程序不在同一个域上,您可能需要配置服务器以允许跨域资源共享(CORS)。

  3. iframe 的 src 属性设置:在您的代码中,您使用了 setTimeout 来延迟设置 iframesrc 属性。这可能是为了确保 iframe 元素已经渲染到 DOM 中。但是,如果延迟时间不够或者 iframe 的 ID 有误,这可能导致问题。

  4. PDF 阅读器参数:在您的 URL 中,您添加了一些查询参数(如 &openfile=false 等),这些参数可能是为了控制 PDF 阅读器的行为。确保这些参数是有效的,并且与您的 PDF 阅读器兼容。

  5. 浏览器插件或扩展:某些浏览器插件或扩展可能会干扰 PDF 的正常显示。

  6. AngularJS 的作用域问题:如果 $scope.openESOP 函数或 dialog.currentFile 在使用时存在作用域问题,这可能会导致数据未能正确绑定。

  为了解决这个问题,您可以尝试以下步骤:

  • 确保 PDF URL 是正确的,并且可以直接在浏览器中访问。
  • 检查服务器是否配置了正确的 CORS 策略。
  • 确保 iframe 的 ID 'kmi-pdf-panel' 是正确的,并且该元素在 DOM 中存在。
  • 移除或调整 setTimeout 以确保 iframe 元素已经渲染。
  • 检查浏览器的控制台是否有任何错误信息,这可能会提供问题的原因。
  • 如果问题依然存在,尝试在 iframesrc 属性中直接使用 PDF 文件的 URL,而不添加任何参数,看看是否能够正常显示。

  希望如上措施及解决方案能够帮到有需要的你。

  PS:如若遇到采纳如下方案还是未解决的同学,希望不要抱怨&&急躁,毕竟影响因素众多,我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴,即把你未解决或者产生新Bug黏贴在评论区,我们大家一起来努力,一起帮你看看,可以不咯。

  若有对当前Bug有与如下提供的方法不一致,有个不情之请,希望你能把你的新思路或新方法分享到评论区,一起学习,目的就是帮助更多所需要的同学,正所谓「赠人玫瑰,手留余香」。

☀️写在最后

  ok,以上就是我这期的Bug修复内容啦,如果还想查找更多解决方案,你可以看看我专门收集Bug及提供解决方案的专栏《CSDN问答解惑-专业版》,都是实战中碰到的Bug,希望对你有所帮助。到此,咱们下期拜拜。

码字不易,如果这篇文章对你有所帮助,帮忙给 bug菌 来个一键三连(关注、点赞、收藏) ,您的支持就是我坚持写作分享知识点传播技术的最大动力。

同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ;以第一手学习bug菌的首发干货,不仅能学习更多技术硬货,还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料,你想要的我都有!

📣关于我

我是bug菌,CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家,C站博客之星Top30,华为云2023年度十佳博主,掘金多年度人气作者Top40,掘金等各大社区平台签约作者,51CTO年度博主Top12,掘金/InfoQ/51CTO等社区优质创作者;全网粉丝合计 30w+;硬核微信公众号「猿圈奇妙屋」,欢迎你的加入!免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料,你想要的我都有,关键是你不来拿哇。


版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com