如何在 iframe 中水平放置 PDF 文件？答案

【问题标题】：How to fit PDF file horizontally in an iframe?如何在 iframe 中水平放置 PDF 文件？
【发布时间】：2012-04-12 02:47:34
【问题描述】：

我一直在努力使 pdf 动态地水平适合 https://www.modelica.org/events/modelica2011/authors-guide/example-abstract.pdf#toolbar=0&navpanes=0&scrollbar=0&view=FitH

但它在 Firefox 中不起作用。

尽管此演示可以正常运行，但您可以在此处查看演示。 http://jsfiddle.net/raanx/1/

【问题讨论】：

jsfiddle 对我来说不能“正常”工作；它提示我下载。（我正在运行 Firefox。）
可能是您的系统上没有安装 acrobate reader 或任何其他 pdf 阅读器。
我确实安装了阅读器；但是我没有浏览器插件。
我在 php 中有一个解决方案，正在为您将其转换为 javascript。
您是否需要一个解决方案来避免安装 pdf 阅读器？

标签： javascript jquery html pdf iframe

【解决方案1】：

1) 嵌入已过时，不应再使用以获得一致的结果。

2) 有多种方法可以处理它（例如，ajax 抓取文件然后渲染它），但是，我会消除涉及浏览器对插件的依赖的怪癖。

要“正确”执行此操作，我会查看 https://github.com/andreasgal/pdf.js#readme 并查看仅在 javascript 中呈现 pdf。它消除了在计算机上安装阅读器的需要，并且是事情的发展方向。

3) 为了处理水平匹配，我发现截至今天为止，css 在一些浏览器中给我的 iframes / pdf 组合带来了问题，于是我使用了老式的宽度和高度，如下所示。古怪，但它适用于 firefox、chrome、IE9、safari，所以请不要因为浏览器怪癖而否定我。否则我只会使用 css。

<iframe name="myiframe" id="myiframe"  width="100%" height="600" src="viewpdf.php"></iframe>

虽然不是 JavaScript，但这里有一些 php 代码演示了我是如何做到的：

查看pdf.php：

header('Content-Type: application/pdf'); 
header('Accept-Ranges: none');  
header('Content-Disposition: inline; filename="' . $finalpdf_fn . '"'); 
header('Content-Transfer-Encoding: binary');
header('Cache-Control: no-store, must-revalidate, post-check=0, pre-check=0', true);

@readfile($finalpdf_fn);

所以...在 JavaScript 中，它看起来像：

function getXMLHttp() {
  var xmlHttp;
  try {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch(e) {
    //Internet Explorer
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  return xmlHttp;
}        
var oRequest = getXMLHttp();
var sURL = "/tmp/pdf-13319JPL3j7.pdf"; 
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("Content-Type","application/pdf");
oRequest.setRequestHeader("Accept-Ranges","none");
oRequest.setRequestHeader("Content-Disposition","inline; filename='"+sURL+"'");
oRequest.setRequestHeader("Content-Transfer-Encoding","binary");
oRequest.setRequestHeader("Cache-Control","no-store, must-revalidate, post-check=0, pre-check=0', true");
oRequest.onreadystatechange = function() {
    if( oRequest.readyState == 4 ) {
        if (oRequest.status==200) { 
            document.write (oRequest.responseText);
        }
    }
}
oRequest.send(null)
</script>

【讨论】：

感谢@Cymbals，但我尝试了 pdf.js，但它不能正确呈现复杂的 pdf 文件（例如复杂的表格数据）。所以我决定使用 pdf-in-iframe 解决方案。
好的，然后我会使用ajax抓取文件，然后为pdf正确设置标题，然后输出文件。
但是即使在通过 ajax 渲染 pdf 之后，它如何解决我的问题？因为在这种情况下它也会被加载到 iframe 中。
没关系 - 关键是要避免嵌入，这就是您使用 ajax 加载它的原因。
我没有得到你。在不使用 iframe 或嵌入或对象标签的情况下，如何在页面中显示 pdf 文件？ ajax 是如何来拯救的？如果可用，是否也想查看工作代码？

【解决方案2】：

好吧，没有办法解决此类特定于浏览器的错误。 pdf 查看器在不同浏览器中的工作方式不同。我建议您使用可用的 Javascript PDF 查看器。

【讨论】：