在chrome中将pdf渲染为iframe [英] Rendering pdf in in chrome as iframe

问题描述

我正在尝试在隐藏的iframe中托管pdf，并且在将它们缩小为chrome时遇到问题.我必须刷新页面，以便它们正确加载.

I am trying to host pdf's in a hidden iframe and have issues with them rendering small in chrome. I have to refresh the page so that they load correctly.

JSfiddle此处 https://jsfiddle.net/464xo40f/

JSfiddle 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>

推荐答案

@Bob R，如果我对您的理解正确，则希望以一定的缩放比例显示pdf内容.让我们开始:

@Bob R, if I understood you correctly, you want to display the pdf content with some zoom. Let's commence:

1. 小提琴示例

1. Fiddle example

您没有将JQuery库指定为依赖项.这就是为什么您的小提琴无法正常工作的原因.

You didn't specify the JQuery library as a dependency. That's why your fiddle didn't work.

由于小提琴用作https，而您的网址不是，浏览器不会显示pdf内容.如果您检查控制台日志，将出现以下消息:该请求已被阻止；内容必须通过HTTPS提供.

Because Fiddle is served as https and your url is not, the browser doesn't display the pdf content. If you check the console log, there will be a message like this: This request has been blocked; the content must be served over HTTPS.

使用放大功能打开文档

更改此:

<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>

如果仔细观察，您会发现我在URL后面附加了#page = 1& zoom = 100"片段.这使得pdf内容可以进行一定程度的缩放.

If you look closely, you'll notice that I've appended to the url the "#page=1&zoom=100" fragment. That makes the pdf content to open up with some zoom.

这篇关于在chrome中将pdf渲染为iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！