在chrome中将pdf渲染为iframe

Question

我正在尝试在隐藏的iframe中托管pdf，并且在Chrome中渲染时问题很小。我必须刷新页面，以便正确加载。

JSfre Here 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而您的网址不是，因此浏览器不会显示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>
   

如果仔细观察，您会注意到我已经在网址上附加了＆＃34; #page = 1＆amp; zoom = 100＆＃34;分段。这使得pdf内容可以通过一些缩放打开。

Answer 2

您可以使用像PDF.js这样的库来提供pdf服务。这样它将与更多浏览器兼容，您不必担心必须强制浏览器刷新才能显示文档

（仅限我在Chrome 51上，而你的小提琴并没有为我加载）