react iframe使用IE 15 windows 10显示带有base64 pdf数据的空白页答案

【问题标题】：react iframe displays blank page with base64 pdf data with IE 15 windows 10react iframe使用IE 15 windows 10显示带有base64 pdf数据的空白页
【发布时间】：2019-08-10 06:17:10
【问题描述】：

React iframe 使用 IE 15 windows 10 显示带有 base64 pdf 数据的空白页面。我使用 browserstack 对其进行了测试。如果我提供一个真正的 pdf 文件，它将在 IE 中工作。

这是我的test project。

主要代码如下：

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>
  );
}

【问题讨论】：

对了，IE15是什么意思？ IE的最新版本是IE11。

标签： reactjs windows pdf internet-explorer iframe

【解决方案1】：

IE 不支持以数据 url 作为 src 属性的 iframe。您可以在caniuse 中查看。它表明支持仅限于图像和链接资源，如 IE 中的 CSS 或 JS。也请查看this documentation:

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

对象（仅限图片）

img

输入类型=图像

链接

接受 URL 的 CSS 声明，例如 background、backgroundImage 等。

【讨论】：