如何在另一个html页面中预览浏览器中的本地文件答案

【问题标题】：How to preview local files in the browser in another html page如何在另一个html页面中预览浏览器中的本地文件
【发布时间】：2019-10-18 03:44:29
【问题描述】：

我正在为一项新任务寻找创造性的解决方案。我的问题是我们需要一种方法来在提供链接的不同网页的框架中预览本地文件（扩展名：doc、docx、ppt、pptx、pdf、tif、jpeg）。预览应该看起来像文件的图像左右。我们想阻止将文件解析为 pdf 以节省时间...

我们使用 Angular 7，c# asp.net 服务器端。我们在大多数解决方案中都非常有限，因为数据非常安全并且用于内部办公网络，这就是为什么我们不能使用谷歌文档解决方案。我还了解到，由于安全原因，使用 iframe 标记并将其 src 属性指向文件源不会加载页面。此外，所有用户都可以通过使用 -> IE 或其他浏览器选项直接从文档中预览上述文件类型。

我试过了：

<iframe src="file:///C:/Users/cd/Downloads/MyFile.docx"></iframe>

但是： iframe 标签没有打开 doc 文件，我可以将 DOM 中的 iframe 视为新的 html，但它没有任何内容我也尝试了图像和相同的框架是空白的

【问题讨论】：

How to open a local disk file with JavaScript?的可能重复
@Vishnudev - 不，我尝试了那里的示例，它们将内容显示为文本，我想要像图像一样的真实预览。
你想做什么。请说明您要查看的文件类型。不可能有适用于所有文件类型的通用查看器。
请在您的控制台中将输出添加到问题中。
Check this please

标签： html angular pdf web iframe

【解决方案1】：

如果您使用的是 chrome，则出于安全原因，chrome 会专门阻止本地文件访问。

更多细节是这个链接：here

【讨论】：

我们正在使用并支持 IE 和 chrome

【解决方案2】：

一种可能的解决方案是将文档页面呈现为图像，然后将它们显示在网页上，即使用 iframe。

您可以使用GroupDocs.Viewer for .NET 将文档页面呈现为高保真图像 (PNG/JPG)。然后，您可以将图像嵌入到您的网页中以预览文档。这是您在 Word 文档中获取页面图像表示的方法：

using GroupDocs.Viewer.Options;

// Set output path 
string OutputPagePathFormat = Path.Combine("D:\\output", "page_{0}.png");
// Render document pages
using (Viewer viewer = new Viewer("D:\\sample.docx"))
{
    PngViewOptions options = new PngViewOptions(OutputPagePathFormat);
    viewer.View(options);
    // Rendered images will be saved in the D:\output\ directory.
}

披露：我在 GroupDocs 担任开发人员宣传员。

【讨论】：