我正在尝试在我的 HTML 中内联显示 PDF 文档。但是,我所知道的所有方法都显示空的内容区域。
请在此处查看示例:http://codepen.io/abhishekisnot/pen/WxmPmd/?editors=1001
到目前为止,我尝试使用以下所有方法:
<object data="http://www.pro-react.com/materials/appendixA.pdf" type="application/pdf" width="100%" height="100%" style="border: 1px solid red;"></object>
<embed src="http://www.pro-react.com/materials/appendixA.pdf" width="100%" height="100%" type='application/pdf' style="border: 1px solid red;">
<iframe src="http://www.pro-react.com/materials/appendixA.pdf" width="100%" height="100%" style=" border: 1px solid red;" frameborder="0"></iframe>
最佳答案
如果您想使用基于浏览器或基于浏览器插件的查看器将 PDF 显示为实际 PDF,您可能找不到一种跨浏览器一致工作的方法。您需要使用一种 JavaScript 查看器,因为它们会将 PDF 转换为 HTML5,然后再显示。
object 标签和embed 标签都依赖浏览器插件来显示src 或data 引用的内容,Edge、Chrome 和Safari 等浏览器不使用插件来显示PDF,它们本身支持并提供自己的自己的 chrome 浏览 PDF。我认为这些不适用于这些标签。
关于javascript - HTML 内联 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39009024/