单击菜单在 <div> 中打开 pdf答案

【问题标题】：Open pdf in a <div> on click of menu单击菜单在 <div> 中打开 pdf
【发布时间】：2018-02-15 00:15:11
【问题描述】：

在我的项目中，我有一个侧边菜单（左）。 OnClick 菜单中的每个 Button 都应在我的页面中间加载一个 pdf（即，在 div 中）。我可以在我的页面中间加载一个 pdf（@987654324 @)，但不是点击我的菜单按钮。 iframes 不应该在我的项目中使用。请帮助我

这是我点击菜单项时的代码（示例代码），pdf 应加载到 div class="col-sm-9 col-md-10"

<div class="col-sm-3 col-md-2 sidebar">

 <ul class="nav nav-sidebar">
                <li style="padding-left:1em;"><h4>MENU</h4></li>
                <li class="active"><a href="shows.aspx" class="user-icon">TV Shows</a></li>
                <li><a href="history.aspx" class="sub-icon">History</a></li>
                <li><a href="#" class="menu1">Movies</a></li>
                <li><a href="#" class="menu">Sports</a></li>
                <li><a href="shows.aspx" class="user-icon">TV Shows</a></li>

<div class="col-sm-9 col-md-10">

【问题讨论】：

你能把你已经做的代码包括进来吗？
确保你可以在上面看到它。我包括 adobe.com/products/acrobat/readstep2.html">在我使用这个的 div 类中，我可以在 div 中加载 pdf。但我想在单击我的菜单 Buttons 时加载 PDF。引导我

标签： javascript html css pdf twitter-bootstrap-3

【解决方案1】：

你的 div 应该嵌入对象标签，即

<div class="col-sm-9 col-md-10">
   <object data="#" type="application/pdf" width="100%" height="750">
        alt : pdf not loaded yet
   </object>
</div>

然后在单击菜单后，将对象标签中的 data="" 更改为您的特定 pdf 源，即

$(".menu, .menu1").on("click", function(){
    $("object").attr('data', 'your-pdf.pdf');
 });

您可以根据上面的脚本开始的菜单决定要显示 pdf 的逻辑。

【讨论】：

【解决方案2】：

您很可能使用<object> tag。您可能必须使用 javascript 标记并在单击时重建它。

如果不知道您的项目是如何布局的，我真的无法提供更多细节。

这里有一个更充实的stackoverflow answer

【讨论】：

【解决方案3】：

$(document).ready(function() {
    $("a[href$='.pdf']").each(function(){
        $(this).attr('href', 'http://docs.google.com/viewer?embedded=true&url=' + $(this).attr('href'));
    });

    $("a[href$='.doc']").each(function(){
        $(this).attr('href', 'http://docs.google.com/viewer?embedded=true&url=' + $(this).attr('href'));
    });

});

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    iframe : {
        preload: false
    }
});

<a class="fancybox" data-fancybox-type="iframe" href="http://www.irs.gov/pub/irs-pdf/fw4.pdf">Test PDF</a>

<a class="fancybox" data-fancybox-type="iframe" href="www.snee.com/xml/xslt/sample.doc">Test Doc</a>

【讨论】：