javascript - 在网页上嵌入 PDF 并水平滚动使其居中

标签 javascript jquery html css pdf

我已使用嵌入标签将 PDF 添加到网页。嵌入窗口的宽度小于 PDF 的宽度。于是,出现了一个水平滚动条。但是,PDF 文档本身的左侧和右侧有宽边距。如果用户滚动中心到 PDF,则 PDF 的内容完全适合。

如果可能的话,我想让这个滚动自动发生。

代码在这里http://shop.stelladoradus.com/product/gsm-repeater/
您必须单击规范选项卡才能查看 PDF。

对于谷歌浏览器,我做了以下操作:

我使用了 iframe 而不是嵌入

<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>

在我的 iframe 页面上:

<style>
object{
    width: 200%;
    margin-left: -370px;
    margin-top: -150px;
}
embed{
    width:100%;
    height:95%;
}
</style>
<html>
<body >
    <object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
        <embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
    </object> 
</body>
</html>

这个解决方案实际上正是我正在寻找的,因为 pdf 被放大了,所以边距没有显示,而且它更容易阅读(更大的文本)。我无法让它在 Firefox 或 IE 上工作,因为你可以使用下面的@Infer-On 解决方案。

最佳答案

好的,我认为您只需将一些参数传递给您的 PDF,如 documentation 中指定的那样:

你可以尝试这样的事情:

zoom=scale 

Sets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.

否则

view=Fit

Set the view of the displayed page, using the keyword values defined in the PDF language specification. For more information, see the PDF Reference.

查看相关文档以找到更适合您的参数

http://example.org/doc.pdf#zoom=50
http://example.org/doc.pdf#view=Fit,100

编辑

我已经尝试过的:

<object data="http://www.stelladoradus.com/wp-content/uploads/2014/03/en_spec_RP1000G3.pdf" 
 type="application/pdf" 
 width="300" height="500">
    <param name="view" value="fit" />

</object>  

http://jsfiddle.net/InferOn/wVaGa/23/

这行得通,但在 Chrome 中不行...

关于javascript - 在网页上嵌入 PDF 并水平滚动使其居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24863135/

相关文章:

影子根或影子根中所有顶级元素的 CSS 选择器

javascript - 叠加在图像上的谷歌地图会使图像消失

jquery - 如何将div放入文本框

javascript - 我怎样才能 "DRY"我的html和javascript代码?

javascript - JQuery remove() 不适用于两个单词的 id

javascript - 来自here.com的图 block / map 的Z索引

javascript - jQuery/js 将具有相同类的近 div 包装成单个 div

html - 如何正确对齐菜单三明治 Bootstrap 4

javascript - 我如何找出 IndexedDB 中可用的数据库?

javascript - getComputedStyle 返回意外的 z-index