PDF 嵌入在 <object> 或 <embed> 标记中未在 IE 11 中加载

Posted

技术标签:

【中文标题】PDF 嵌入在 <object> 或 <embed> 标记中未在 IE 11 中加载【英文标题】:PDF Embedded in <object> or <embed> tag not loading in IE 11 【发布时间】:2014-02-14 16:02:56 【问题描述】:

我必须创建一个我正在使用的图像滑块:

"画廊插件 > http://www.twospy.com/galleriffic/",

在图像滑块中,我必须在某些情况下显示 PDF 以及图像。

为了表明这一点,我将嵌入 PDF&lt;div&gt; 放入“&lt;div class="caption"&gt;”中,您可以在其中显示与图像相关的描述。

对于带有 PDF 的 Slider,您可以在此处查看完整代码:http://jsfiddle.net/Z99gr/2/

我正在尝试使用&lt;object&gt; or &lt;embed&gt; 标签嵌入 PDF,它在 Chrome 和 Firefox 中运行良好。但不在 IE11 中。

我无法理解缺少什么,因为我只用一个嵌入 PDF 的 div 再创建了一个小提琴,并且它在 Chrome、Firefox 和 IE11 这三种浏览器中都能正常工作。

http://jsfiddle.net/dmAM3/1/

请调查问题并尽快建议我在 IE 11 中缺少什么。

谢谢!

【问题讨论】:

“调查问题并尽快提出建议”。这将保证您立即响应 【参考方案1】:

我现在可以使用“&lt;iframe&gt;”标签嵌入 PDF 文件 IE。

我用&lt;iframe&gt; 替换了“&lt;object&gt;”和“&lt;embed&gt;”标签,现在它在所有 3 种浏览器(Firefox、Chrome 和 IE)上都可以正常工作。

在 IE 中嵌入 PDF 有两种方式。

第一种方式:直接在&lt;iframe&gt;调用PDF

以下是更新后的代码:

<div id="pdf">
   <iframe src="https://www.adobe.com/products/pdfjobready/pdfs/pdftraag.pdf" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
        <p>It appears your web browser doesn't support iframes.</p>
   </iframe>
</div>

第二种方式:如果浏览器没有PDF阅读器,你可以调用&lt;iframe&gt;中包含&lt;object&gt;标签的HTML页面

下面是第二个选项的代码

    <div id="pdf">
          <iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
               <p>It appears your web browser doesn't support iframes.</p>
          </iframe>
   </div>

pdf.html”的代码

<body>
    <object data="lorem.pdf" type="application/pdf">
        <p>It appears you don't have Adobe Reader or PDF support in this web browser. <a href="lorem.pdf">Click here to download the PDF</a>. Or <a href="http://get.adobe.com/reader/" target="_blank">click here to install Adobe Reader</a>.</p>
       <embed src="lorem.pdf" type="application/pdf" />
    </object>
</body>

这对我有用!!!

这是工作小提琴:http://jsfiddle.net/stmjvz4f/

希望以后对其他人有所帮助!

【讨论】:

第一种方法是在 src 属性中设置 pdf 的 URL。在您的第二种方法中,您直接使用该文件。 IE11 似乎有一个问题(安全约束)将 url 或 blob 传递给对象或嵌入元素。【参考方案2】:

我建议查看 PDFObject,它是一个用于将 PDF 嵌入 HTML 文件的 javascript 库。它可以很好地处理浏览器的兼容性,并且很可能会一直工作到 IE8。

在您的 HTML 中,您可以设置一个 div 来显示 PDF:

<div id="pdfRenderer"></div>

然后,您可以使用 Javascript 代码在该 div 中嵌入 PDF:

var pdf = new PDFObject(
  url: "https://something.com/HTC_One_XL_User_Guide.pdf",
  id: "pdfRendered",
  pdfOpenParams: 
    view: "FitH"
  
).embed("pdfRenderer");

【讨论】:

我也尝试过......即使这不起作用...... PDF Ovject的另一个问题是它使用ID......正如我提到的那样我是图像滑块......所以我必须显示几个 PDF,所以我收到错误,因为有多个具有相同 ID 的 div...而且这个 JS 不支持类... 感谢您调查这个问题,我尝试了 PDFObject 但它没有用,我可以通过简单地使用 【参考方案3】:

不要在 中放置 'type' 属性,只需在 中像这样: 中的 type 属性导致 IE11 中的 Adob​​e Reader 出现权限错误。

<object data="mydocument.pdf">
<p><a href="mydocument.pdf">Download</a></p>
<embed type="application/pdf" src="mydocument.pdf" />
</object>

您不必将其放入 iframe 中。 它可以显示控件,所以我认为它不会像预期的那样在滑块内工作。

【讨论】:

以上是关于PDF 嵌入在 <object> 或 <embed> 标记中未在 IE 11 中加载的主要内容,如果未能解决你的问题,请参考以下文章

嵌入 PDF 将随机不显示

如何在没有 iframe 的页面中嵌入 PDF.JS 查看器

js在页面中嵌入pdf文件

如何支持所有移动浏览器的 PDF 查看?

在移动浏览器中嵌入 PDF

嵌入式 pdf 文件未在 Django 中显示