使用 Dropbox JavaScript SDK 下载文件时出现问题

Question

我正在尝试使用 Dropbox Javascript SDK 将文件下载到客户端的 Webapp 本身。

我想说清楚我只想将文件下载到网络应用程序中的文件夹中；我知道出于安全考虑，这实际上可能是不可能的。

我遵循以下提供的文档：

http://dropbox.github.io/dropbox-sdk-js/index.html

http://dropbox.github.io/dropbox-sdk-js/Dropbox.html#filesDownload__anchor

这是我的控制器代码：

$scope.testDownload = function() {
  console.log('Testing Download');
  dbx.filesDownload( {path: '/Collorado Springs.jpg'} ) // Just a test file
    .then(function(response) {
      console.log(response);
    })
    .catch(function(error) {
      console.log(err);
  });
};

我可以肯定地看到确实发生了下载，正如在 Chrome 网络工具中显示的那样：

（我没有足够的声誉来插入多个链接，所以请插入我生成的共享 "link"）

https:// www.dropbox.com/s/s0gvpi4qq2nw23s/dbxFilesDownload.JPG?dl=0

我认为这要么是我缺乏文件下载方面的知识，要么是使用不当 JavaScript。

提前感谢您提供的任何帮助。

Answer 1

如果您希望在 Web 应用程序中下载和使用文件，那么最好设置一个后端服务器并使用它来临时存储内容，当然要获得用户的许可。

为此，发出 HTTP 请求，然后使用 Express 通过调用 Dropbox 服务来处理请求 server-side，然后使用如下代码：

'use strict';
var Dropbox = require('dropbox');
var fs = require('fs');
var path = require('path');

exports.downloadFile = function(token, id, eventID, fileType, callback) {
  var dbx = new Dropbox({ accessToken: token });  // creates post-auth dbx instance
  dbx.filesDownload({ path: id })
    .then(function(response) {
      if(response.fileBinary !== undefined) {
        var filepath = path.join(__dirname, '../../images/Events/' + eventID + '/' + fileType + '/Inactive/', response.name);
        fs.writeFile(filepath, response.fileBinary, 'binary', function (err) {
          if(err) { throw err; }
          console.log("Dropbox File '" + response.name + "' saved");
          callback('File successfully downloaded');
        });
      }
    })
    .catch(function(err) {
      console.log(err);
      callback('Error downloading file using the Dropbox API');
    })
}

module.exports = exports;

Answer 2

也有一种方法可以在客户端执行此操作，而不必像接受的答案所建议的那样推出自己的服务器实现。

对于遇到此问题的任何其他人，您可以使用 FileReader API。

$scope.testDownload = function() {
  console.log('Testing Download');
  dbx.filesDownload( {path: '/Collorado Springs.jpg'} ) // Just a test file
    .then(function(response) {
      console.log(response);
      const reader = new FileReader();
      const fileContentAsText = reader.readAsText(response.result.fileBlob);
      reader.onload = (e) => {
        console.log({ file: reader.result }); // Logs file content as a string
      };
    })
    .catch(function(error) {
      console.log(err);
  });
};

使用 Dropbox JavaScript SDK 下载文件时出现问题

Issues downloading files using Dropbox JavaScript SDK

javascript

download

dropbox-api

dropbox-sdk-js