javascript - HTML 内联 PDF

标签 javascript html css pdf

我正在尝试在我的 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/

相关文章:

javascript - fabricjs中填充图像的对象的透视变换

html - 我想将第一列设为静态并使其可排序?

javascript - 按月对日期进行分组,然后使用 lodash 和 moment 降序排序

javascript - 我怎样才能从对象中删除一个键,不可变,除非在您执行删除之前不知道键名?

Gmail 中的 HTML 电子邮件液体布局中断

html - 在 Bootstrap 列中动态调整圆 Angular div 的大小

css - CSS 中垂直边距的问题

html - Grails response.sendError 不渲染 gsp 标签

javascript - lambda : Duplicate an object by its (array) property

javascript - 使用正则表达式验证 img url