使用 Javascript 下载 BIM360 Docs 文件答案

【问题标题】：Download BIM360 Docs file using Javascript使用 Javascript 下载 BIM360 Docs 文件
【发布时间】：2018-11-24 07:25:59
【问题描述】：

我正在尝试使用 javascript 下载 BIM360 文档文件。我能够从 BIM360 获得文件响应，但无法保存具有正确内容的文件。这是我的 JS 代码 -

$(document).ready(function () {
    var anchor = $('.vcard-hyperlink');
    $.ajax({
        url: <file downloaded URL>,
        type: "GET",
        headers: {
            "Authorization": "Bearer " + <accessToken>
        },
        beforeSend: function (jqxhr) {

        },
        success: function (data) {
            // create a blob url representing the data
            var blob = new Blob([data]);
            var url = window.URL.createObjectURL(blob);
            // attach blob url to anchor element with download attribute
            var anchor = document.createElement('a');
            anchor.setAttribute('href', url);
            anchor.setAttribute('download', "test.docx");
            anchor.click();
            window.URL.revokeObjectURL(url);

        },
        error: function (jqxhr, textStatus, errorThrown) {
            console.log(textStatus, errorThrown)
        }
    });
});

【问题讨论】：

仅供参考，您不应使用这种方法，与 Forge 的所有通信都应在服务器端执行，并且数据应通过您自己的服务器应用程序公开的受控自定义端点公开给您的客户端页面。 .. 向客户端应用程序公开令牌会使您的数据易受攻击，应将其视为安全问题。给我您的应用程序的 url，我将从您的 A360 帐户中收集所有设计数据（也可能删除您的文件，具体取决于您用于该令牌的范围）:) 使用我们提供的服务器端 SDK 之一给你
感谢@Philippe，我正在使用数据：读取范围，并且由于我使用的是 JS 下载方法，我不想从我的服务器流式传输数据。

标签： autodesk-forge autodesk-data-management autodesk-bim360

【解决方案1】：

为了从 BIM360 服务下载文件，我使用 jQuery 的自定义 Ajax transports 创建新的 XMLHttpRequest 并将所有接收到的数据传递回 jQuery，有关使用 jQuery 的 Ajax 传输的详细信息，请参阅 here。

/**
 *
 * jquery.binarytransport.js
 *
 * @description. jQuery ajax transport for making binary data type requests.
 * @version 1.0 
 * @author Henry Algus <henryalgus@gmail.com>
 *
 */
// use this transport for "binary" data type
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
        return {
            // create new XMLHttpRequest
            send: function(headers, callback) {
                // setup all variables
                var xhr = new XMLHttpRequest(),
                    url = options.url,
                    type = options.type,
                    async = options.async || true,
                    // blob or arraybuffer. Default is blob
                    dataType = options.responseType || "blob",
                    data = options.data || null,
                    username = options.username || null,
                    password = options.password || null;

                xhr.addEventListener('load', function() {
                    var data = {};
                    data[options.dataType] = xhr.response;
                    // make callback and send data
                    callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                });

                xhr.open(type, url, async, username, password);

                // setup custom headers
                for (var i in headers) {
                    xhr.setRequestHeader(i, headers[i]);
                }

                xhr.responseType = dataType;
                xhr.send(data);
            },
            abort: function() {
                jqXHR.abort();
            }
        };
    }
});

以下代码 sn-p 是我用于通过 Forge Data Management API 从 BIM360 存储桶下载文件的代码。使用上述自定义 Ajax 传输和dataType: 'binary'，API 响应将作为 blob 处理。之后，我们只需要创建一个 blob URL 和一个临时 HTML 链接来打开 blob URL 以保存下载的文件。

要获取实际的文件存储URL，需要调用APIGET Item Versions，下载链接是API响应中每个item版本数据的storage.meta.link.href属性值。

$(function() {

  $('a#download').click(function(event) {
    event.preventDefault();

    const filename = '2f536896-88c8-4dee-b0c1-cdeee231a028.zip';

    const settings = {
      crossDomain: true,
      url: 'https://developer.api.autodesk.com/oss/v2/buckets/wip.dm.prod/objects/' + filename,
      method: 'GET',
      dataType: 'binary',
      processData: false,
      headers: {
        Authorization: 'Bearer YOUR_ACCESS_TOKEN',
        Content-Type: 'application/octet-stream'
      }
    };

    $.ajax(settings).done(function (blob, textStatus, jqXHR) {
        console.log(blob );
        console.log(textStatus);

      if( navigator.msSaveBlob )
        return navigator.msSaveBlob(blob, filename);

      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style = 'display: none';
      document.body.appendChild(a);

      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    });
  });
})

希望对你有帮助。

【讨论】：