Javascript 全高度嵌入PDF_Javascript_Html_Css

Javascript 全高度嵌入PDF

javascript html css

Javascript 全高度嵌入PDF,javascript,html,css,Javascript,Html,Css,我的问题。。。是否可以在高度始终为100%的HTML文档中嵌入PDF。问题是pdf的实际高度可能会有所不同，布局需要对此做出响应在HTML中嵌入PDF有几种方法一种是使用。下面的示例在firefox中是开箱即用的，您可以在其网站上找到大多数浏览器的进一步说明 <object data="myfile.pdf" type="application/pdf" width="100%" height="100%"> <p>It appears you don't h

我的问题。。。是否可以在高度始终为100%的HTML文档中嵌入PDF。问题是pdf的实际高度可能会有所不同，布局需要对此做出响应

在HTML中嵌入PDF有几种方法

一种是使用。下面的示例在firefox中是开箱即用的，您可以在其网站上找到大多数浏览器的进一步说明

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
    <p>It appears you don't have a PDF plugin for this browser.
    No biggie... you can <a href="myfile.pdf">click here to
    download the PDF file.</a></p>
</object>

必须设置容器的宽度\高度

<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>

确保使用

以上所有答案都不适合我。以下内容适用于我需要的每个平台（即，我没有测试ie）

我喜欢PDF的html对象附带的功能，而不是像PDF.js这样用于灯光项目的库。这肯定不是最好的答案，但我目前正在Angular 6应用程序中使用JQuery和Bootstrap，因此我在加载视图后修改高度

我设定

        <object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>

看到这篇文章，我想我会发帖的。希望这有帮助，如果您认为这是不好的编码实践，请纠正我

正文{
保证金：0；/*重置默认保证金*/
}
iframe{
display:block；/*默认情况下，iframe是内联的*/
背景：#000；
边框：无；/*重置默认边框*/
高度：100vh；/*视口相对单位*/
宽度：100vw；
}

您如何嵌入pdf文档？我可以使用此方法来使用全高。有人让它工作了吗？否则就太棒了@你的意思是“我不能让这种方法使用全高”？@IfediOkonkwo是的，对不起。我就是这么想的ment@cholewa1992将此添加到页面的css:html，body{height:100%；}值得注意的是，这在HTML5中并不完全正确，

标记是其中的一部分。感谢您的帮助。我使用的是openHtmlToPdf库，它没有考虑图像标签的高度或css高度属性。最终你的解决方案起了作用。谢谢

<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>

<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
  </body>
</html>

        <object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>

  ngAfterViewInit(): void {
    var width = $("#pdf").width();
    $("#pdf").prop("height", width * 1.4375 + "px");
   }