Question

我正在尝试创建一个伪报告，向我显示导入数据时的错误。要做到这一点，我有两个功能：

                let createHtmlErrorReport = (err) => {

                    let currentDate = new Date().toLocaleString();
                    let contents = '<!DOCTYPE html> ' +
                        '<html>' +
                        '<head>' +
                        '<title>Import Inventory Import</title>' +
                        '<meta charset="utf-8" />' +
                        '<meta http-equiv="Content-Language" content="en">' +
                        '<style type="text/css">' +
                        ' html { margin:0;  }' +
                        ' body { background-color:#d6d6d6; font: 10pt sans-serif;}' +
                         'ul li{ padding: 3px; font:12pt;}'+
                        ' #header {padding:10px; background-color:#007fcc; color:#ffffff; } ' +
                        '</style>' +
                        '</head>' +
                        '<body>' +
                        '<div id="header">'+
                        '<strong>Import Inventory Import</strong>' +
                        '</div>' +
                        '<p><strong>Imported ' + currentDate + ' by ' + err.username + ' | ' + err.unprocessedItemsCount + ' items not imported | ' + err.processedItemsCount + ' items imported | '+ err.errorMessages.length + ' errors.</strong></p>'+
                        '<p>The following errors occured during import: </p>'+
                        '<div id="errorList" style="padding:5px;"></div>'+
                        '</body>' +
                        '</html>';
                    return contents;

                }

在上面我创建了一个新文档，添加了一些基本样式，然后创建了div容器，我想要插入一个错误列表。

<div id="errorList" style="padding:5px;"></div>

下一个函数调用此方法并构建错误列表

            let generateImportErrorReport = (errors) => {
                        let doc = createHtmlErrorReport(errors);
                        let errorReportWindow = window.open('', '_blank');
                        errorReportWindow.document.write(doc);
                        let list = document.createElement('ul');
                        //builds a list of errors 
                        for (let i = 0; i < errors.errorMessages.length; i++) {
                            let item = document.createElement('li');
                            let message = errorReportWindow.document.createTextNode(errors.errorMessages[i]);           
                            item.appendChild(message);
                            list.appendChild(item);;
                        }  
}

该列表只不过是一个字符串数组：

errors.errorMessages = [
{'Message 1'},
{'Message 2'}
]

此代码在Chrome和Firefox中运行正常但是在IE中生成了新文档，但列表从未附加到所选元素。我可以看到生成的元素但它不会添加到新创建的文档中。

IE dev工具在内部捕获Error: No such interface supported

的通用消息

我已经看过其他类似问题的SO贴子，但没有适合我的情况的解决方案，因为我生成html，同时记录文档与使用现有文档。

编辑**：此代码虽然标准js是作为角度应用程序的一部分在typescript中编写的。 TS生成为ECMA3，使用箭头函数或标准符号生成相同的结果。

我很欣赏有关我所缺少的任何建议或指示。

Answer 1

要使其在IE 11中运行，您可以关注Mirko Cianfarani's suggestion：使用要附加这些元素的文档对象创建动态元素。在您的情况下，这是新报告窗口的文档errorReportWindow.document。报告文件也应在最后结束。

var generateImportErrorReport = function(errors) {
  let doc = createHtmlErrorReport(errors);
  let errorReportWindow = window.open('', '_blank');
  let errorDoc = errorReportWindow.document; // Get the error report document object
  errorDoc.write(doc);
  let list = errorDoc.createElement('ul'); // Create with errorDoc
  // Builds a list of errors
  for (let i = 0; i < errors.errorMessages.length; i++) {
    let item = errorDoc.createElement('li'); // Create with errorDoc
    let message = errorDoc.createTextNode(errors.errorMessages[i]); // Create with errorDoc
    item.appendChild(message);
    list.appendChild(item);;
  }
  var errorList = errorDoc.getElementById('errorList');
  errorList.appendChild(list);
  errorDoc.close(); // Close the document
}

您可以在这两个掠夺者中测试代码：

This plunker使用原始代码
This plunker使用上面显示的代码

IE 11忽略了动态生成的html页面的appendChild（）

1 个答案: