我正在编写一个在 iframe 中加载文件的应用程序。它适用于 .pdf 和图像文件,但不适用于 .djvu 文件。文件地址正在通过 AngularJS (v1.2) 传递到 iframe
当我尝试加载 .djvu 文件时,我收到 404.3 Not found 错误。下面是正在渲染的视图:
索引.cshtml
@model string
<div ng-controller="FileBrowserController" ng-init="getFiles('@Model')" style="width:100%;position:absolute;top:0;bottom:0;">
<div class="row text-center" ng-show="showButtons" style="margin-bottom:5px">
<div class="col-xs-1">
<!--<button ng-show="f" type="button" class="btn btn-sm btn-primary" ng-click="deleteFile()" ng-confirm-click="Are you sure that you want to delete this file?">Delete</button>-->
</div>
<div class="col-xs-10">
<button ng-show="showButtons" type="button" class="btn btn-sm btn-primary" ng-disabled="currentFile.sortOrder==1" ng-click="previousFile()">Previous</button>
<select ng-model="currentFile" ng-show="showButtons"
ng-options="file.sortOrder for file in files"
ng-change="setFile()"></select>
<button ng-show="showButtons" type="button" class="btn btn-sm btn-primary" ng-disabled="currentFile.sortOrder==files.length" ng-click="nextFile()">Next</button>
</div>
<div class="col-xs-1"> </div>
</div>
<iframe style="min-height:100%;min-width:100%" ng-src="{{currentFileUrl}}"></iframe>
<!-- Modal -->
<div class="modal fade" id="getdjvuPluginModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabel">Get DjVu Viewer browser plugin</h4>
</div>
<div class="modal-body">
<div>
<p>It doesn't look like you have installed a plugin to view ".djvu" files with.</p>
</div>
<p>
<strong>If you are using Internet Explorer, Firefox, or Safari:</strong>
</p>
<p>
Download the DjVu Browser Plug-in for Internet Explorer, Firefox and Safari. Please click <strong><a ng-href="{{djvuPluginUrl}}" target="_blank">here</a></strong> to go to the download page.
</p>
<p>
<strong>If you are using Chrome:</strong>
</p>
<p>
Download the DjVu Viewer Extension for Google Chrome. Please click <strong><a ng-href="{{chromePluginUrl}}" target="_blank">here</a></strong> to go to the Google Play store and download the plugin.
</p>
<hr />
<div>If you already have the plugin installed and think you are seeing this message in error then please reload the page.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
@Scripts.Render("~/app/documents/detectDjVuPlugin.js")
AngularJS 将 url 作为可信资源 url 传递给 iframe
$scope.currentFileUrl = $sce.trustAsResourceUrl($scope.currentFile.fileUrl);
我已尝试按照推荐的步骤操作:
- 将处理程序添加到 Web.config
<system.webServer>
...
<staticContent>
<!-- .DjVu files handler -->
<mimeMap fileExtension=".djvu" mimeType="image/vnd.djvu"/>
<mimeMap fileExtension=".djv" mimeType="image/vnd.djvu"/>
</staticContent>
- 向 IIS 添加了 MIME 类型
- 检查是否安装了 djvu 插件(我可以从互联网上加载 djvu 文件)
- 将文件 url 设置为
<embed>
标记的源应用程序在 .Net 4.0、C# 后端和 AngularJS 上运行。
我不知道如何获得这种加载。