使用角度显示来自 Domino 数据服务的附件答案

【问题标题】：Showing attachments from Domino Data Service using angular使用角度显示来自 Domino 数据服务的附件
【发布时间】：2016-11-07 16:38:56
【问题描述】：

我正在使用

获取完整的 Domino 文档

/api/data/documents/unid/

语法。我已经看到我得到了附件的 base64 编码版本

"contentType": "application/octet-stream; name=\"Spitzbuben.docx\"",

我只是想知道使用 angular 向用户显示此内容的好方法是什么 - 我正在寻找某种文件上传指令。

你有什么建议吗？

更新：

对文档的 DDS REST GET 调用的响应实际上将每个附件作为多部分数组返回；我实际上已经在内存中获得了数据。我只是想知道哪种方式是向用户展示他可以“下载”一个或多个附件这一事实的最优雅方式。

这是我现在使用的 GET 调用： http://magermandemo2.ch/Development/handbuch/handbuch1_0/Handbuch_(1_0)_Dev.nsf/api/data/documents/unid/B011CE4D9E3DC16DC1257DAA00718FBB

并且 domino 在富文本渲染到 HTML 的末尾添加了这个（参见附件：Spitzbuben.doc）：

【问题讨论】：

我认为您不需要文件上传，因为您希望像文件下载一样显示附件。我在 XPages 应用程序中遇到了同样的挑战，Cloudant 中的数据采用 base64 编码。我创建了一个 servlet 来获取我的 base64 代码并将其作为下载提供。当用户想要下载附件时触发 servlet。见github.com/flinden68/HR-Assistant/blob/master/nsf/Code/Java/ch/…
如果这只是用于显示图像，您可以使用 ng-src 指令使用指向 base64 编码数据的数据 uri 来呈现它。见这里：stackoverflow.com/questions/27637449/…。如果要创建附件链接，请使用 ng-href 并构造一个 URL，如 /dbpath/0/unid/$file/filename
Frank 和 Mark，非常感谢您的回答 - 但我的问题肯定是愚蠢的 - 文档的 GET 调用返回所有附件，base64 编码，所以我不需要问服务器再次获取相同的信息。我已经在记忆中得到了信息。我只想显示类似文件表的内容 - 单击文件名，下载文件名（但从内存到下载，而不是从服务器到下载）。或者有没有更好的方法来显示具有适度良好再现的富文本？我已经解决了内联图像的问题。
@AndrewMagerman，也许你可以使用数据uri，stackoverflow.com/questions/283956/…
弗兰克和马克，你们都帮助了我，我想给你们两个正确的答案

标签： angularjs xpages lotus-domino

【解决方案1】：

正是弗兰克的评论导致了解决方案。 RFC 2397 定义了一个 'data-url' 方法，可以让你直接将数据放入 url。

这是 HTML：

  <div class="panel panel-default" ng-if="attachments">
    <div class="panel-heading">Attachments</a></div>
    <div class="list-group">
        <a ng-repeat="attachment in attachments" class="list-group-item" download="{{attachment.filename}}"
           ng-href="{{attachment.dataurl}}">{{attachment.filename}}</a>
    </div>
</div>

这里是加载附件的指令部分（可以是数组：）

   dataService.loadSingleDocumentbyUNIDMultiPart(unid).then(function (data) {
    var receiveddata = angular.fromJson(data);

if (receiveddata.Body) {
    scope.attachments = [];
    var newVal = receiveddata.Body;
    if (newVal) {

        if (mimeObj.contentDisposition) {
            //example:   "contentDisposition": "attachment; filename=\"Spitzbuben.docx\"",
            var regex = /attachment; filename=\"(.*)\"/;
            var match = regex.exec(mimeObj.contentDisposition);
            if (match) {
                // example:  "contentType": "application/octet-stream; name=\"Spitzbuben.docx\"",
                var mediatype = mimeObj.contentType.substring(0, mimeObj.contentType.indexOf(";"));

                // https://www.rfc-editor.org/rfc/rfc2397 dataURL definition
                var thisAttachment = {
                    "filename": match[1],
                    "dataurl": "data:" + mediatype + ";base64" + "," + mimeObj.data
                };
                scope.attachments.push(thisAttachment);
            }
        }
    }
} else {
    // the body has not been received so we clean stuff u
    scope.attachments = null;
}

您还需要通过以下 .config 设置明确说明这些数据 url 是正常且安全的：

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data):/);

【讨论】：

很高兴看到我可以帮助您指出正确的方向

【解决方案2】：

从服务器下载任何文件的一种简单方法是在锚标记中包含 URL。

<a target="_self" href="example.com/uploads/Spitzbuben.docx" download="Spitzbuben.docx">

不确定您的授权内容。希望这会有所帮助

【讨论】：