如何显示所选文档的预览

Question

如何显示文档的预览。 readasDataUrl 是否也适用于预览 .pdf、.xls 文件？

var reader = new FileReader();
    reader.readAsDataURL($files[i]);
    reader.onload = function (loadEvent) {
    $scope.$apply(function () {
       $scope.dataUrlss = loadEvent.target.result;
    });
};

var doc = document.getElementById('FileFrame').contentWindow.document;
doc.open();
doc.write($scope.dataUrlss);
doc.close();

我的 iframe 标记是

 <iframe id="FileFrame" src="about:blank" style="height: 900px; width: 700px;"></iframe>

该解决方案对我不起作用。请帮助我。在此先感谢...

Answer 1

这可行（fiddle）：

var reader = new FileReader();

reader.addEventListener("load", function (event) {

    var div = document.createElement("div");
    div.innerHTML
        = '<object data="' 
        + reader.result 
        + '" type="'+file.type+'">' 
        + '<embed src="' 
        + reader.result 
        + '" type="'+file.type+'" />' 
        + '</object>';
        output.insertBefore(div, null);

});

//Read the file
reader.readAsDataURL(file);

部分代码，请参阅小提琴以获取完整内容。我没有把它放在 angular 或 iframe 中，但问题不在于这两种技术，而在于它的插入方式。这可以很容易地修改为与两者一起使用。某些文档类型（如 xls 或 xlsx）可能需要额外的工作，或者可能根本无法嵌入。