autodesk-forge - 使用 Javascript 下载 BIM360 Docs 文件
问题描述
我正在尝试使用 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)
}
});
});
解决方案
为了从 BIM360 服务下载文件,我使用 jQuery 的自定义Ajax 传输来创建新的 XMLHttpRequest 并将所有接收到的数据传递回 jQuery,请参阅此处了解使用 jQuery 进行 Ajax 传输的详细信息。
/**
*
* 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();
}
};
}
});
以下代码片段是我用于通过 Forge Data Management API 从 BIM360 存储桶下载文件的代码。使用上述自定义 Ajax 传输和dataType: 'binary'
,API 响应将作为 blob 处理。之后,我们只需要创建一个 blob URL 和一个临时 HTML 链接来打开 blob URL 以保存下载的文件。
要获取实际的文件存储 URL,必须调用 API GET Item Versions,下载链接是storage.meta.link.href
API 响应中每个项目版本数据的属性值。
$(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);
});
});
})
希望能帮助到你。
推荐阅读
- reactjs - 动作未在反应本机应用程序中显示日志
- python - 定义将随机值添加到展平层输出的 Keras 自定义层
- azure - 如何测试 Azure“端点安全”策略的合规性
- android - 如何在改造多部分请求中获取上传进度百分比?
- android - Google Play - 新应用程序的内部测试
- wordpress - 结帐页面中的 Woocommerce、计费国家和州没有改变
- python - 我怎样才能回到python
- python - Python:每周拆分日期时间日期
- java - 当它与另一个覆盖窗口的位置匹配时,如何删除android中的覆盖窗口?
- mongodb - MongoDB BulkWrite 更新操作 $set 不工作