html - 在 chrome 中将 pdf 呈现为 iframe

Question

我正在尝试在隐藏的 iframe 中托管 pdf，但它们在 chrome 中呈现很小的问题。我必须刷新页面，以便它们正确加载。

JSfiddle 在这里 https://jsfiddle.net/464xo40f/

JavaScript
=====================
$(document).ready(function(){
$("#evidence-frame").hide();
  $("#toggle").click(function(){
    $("#evidence-frame").toggle();
  });
});

HTML
======================
<h4>Ethics</h4>
<h5>CST 373: Ethics in Major</h5>
<p class="description">
    <span class="description-title">Description</span><br />
    Investigates through an ethical perspective how communication technology affects our lives. Discusses individual and institutional values represented through technological choices. Using case studies and current events, explores such issues as intellectual property rights, information access and privacy, and the digital divide. 
<br />
<span id="evidence">Evidence: </span><a id="toggle" href="#">Ethical Challenge Presented: Volkswagen's Cheating Emissions Testing with Software</a>
<br />
<iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf" width="100%" style="height:66em"></iframe>
</p>
</p>

Answer 1

@Bob R，如果我没理解错的话，您想以一定的缩放比例显示 pdf 内容。让我们开始吧:

1. fiddle 示例

您没有将 JQuery 库指定为依赖项。这就是你的 fiddle 不起作用的原因。

因为 Fiddle 是作为 https 而你的 url 不是，浏览器不显示 pdf 内容。如果查看控制台日志，会出现这样的信息:This request has been blocked;内容必须通过 HTTPS 提供。

1. 打开文档并放大

改变这个:

    <iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf" width="100%" style="height:66em"></iframe>

为此:

    <iframe id="evidence-frame" src="http://www.borillion.com/portfolio/res/EthicalChallengePresentedVolkswagensCheatingEmissionsTestingwithSoftware.pdf#page=1&zoom=150" width="100%" style="height:66em"></iframe>

如果仔细观察，您会注意到我已将“#page=1&zoom=100”片段附加到 url。这使得要显示的 pdf 内容被放大。