在 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. 小提琴示例

您没有将 JQuery 库指定为依赖项。这就是为什么你的小提琴不起作用。

因为 Fiddle 被用作 https 而你的 url 不是，所以浏览器不会显示 pdf 内容。如果查看控制台日志，会出现这样的消息：此请求已被阻止；内容必须通过 HTTPS 提供。

2. 放大打开文档

改变这个：

    <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内容放大。