2021/04/29 embed/iframe将后端返回的URL变成PDF展示到页面上

最新推荐文章于 2025-04-10 19:29:14 发布

原创

最新推荐文章于 2025-04-10 19:29:14 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

本文探讨了在HTML中如何使用iframe和embed标签加载PDF文件，面对跨域问题的解决方案，以及如何关闭预览框和工具栏。重点介绍了通过iframe实现的打印功能和几种第三方插件的应用。

背景
–1.首先，这个URL是PDF格式的文件，而且后端返回给我的这个链接，直接单击都能进去
–2.用的是浏览器媒体嵌入，embed标签或者iframe标签实现
我尝试了vue-pdf,第一步跨域就失败了。 pdfjs,pdfobject,等等我能够搜索到的东西，反正技术不行没有实现。后来后端解决了跨域，给我返回的文件也变成了二进制流，但是产品统一用以前的iframe实现的效果，就没有尝试了
代码
1.embed

 <embed
    :src="`${your's pdfUrl}#toolbar=0&navpanes=0&scrollbar=0`"
      type="application/pdf"
      width="100%"
      height="500px;"
 />

–这里toolbar=0&navpanes=0&scrollbar=0将标签的预览框，工具栏给关掉了，页面上效果如下
embed取消黑色预览框

–需要预览框工具栏的不进行设置即可
2.iframe
代码

<iframe
    :src="pdfUrl"
      frameborder="0"
      scrolling="no"
      width="100%"
      height="500px"
      Border="0"
      Marginwidth="0"
      Marginheight="0"
></iframe>

标签属性能够直接搜到，黑色预览框是关不掉的，frameborder只是个黑影边框,效果如下