反应iframe使用IE 15 Windows 10用base64 pdf数据显示空白页 [英] react iframe displays blank page with base64 pdf data with IE 15 windows 10

问题描述

React iframe 显示带有IE 15 Windows 10的base64 pdf数据的空白页.我用browserstack测试了.如果我提供了一个真正的pdf文件，它将在IE中运行.

React iframe displays blank page with base64 pdf data with IE 15 windows 10. I tested it with browserstack. If I supply a real pdf file, it will work in IE.

这是我的测试项目.

主要代码如下:

function App() {
  const meta = 'data:application/pdf;base64,';

  const data = meta +  
    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';

  return (
    <div className="App">
      <Iframe src={data}
        width="450px"
        height="450px"
        id="myId"
        className="myClassname"
        display="initial"
        position="relative"/>
    </div>
  );
}

推荐答案

IE不支持将数据网址作为src属性的iframe.您可以在 caniuse 中进行检查.它表明该支持仅限于图像和IE中的链接资源(如CSS或JS).另请检查此文档:

IE doesn't support iframe with data url as src attribute. You could check it in caniuse. It shows that the support is limited to images and linked resources like CSS or JS in IE. Please also check this documentation:

仅以下元素和/或支持数据URI 属性.

Data URIs are supported only for the following elements and/or attributes.

• 对象(仅限图片)
• img
• input type = image
• 链接
• 可接受URL的CSS声明，例如background，backgroundImage等.

• object (images only)
• img
• input type=image
• link
• CSS declarations that accept a URL, such as background, backgroundImage, and so on.

这篇关于反应iframe使用IE 15 Windows 10用base64 pdf数据显示空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！