javascript - 如何使用 JavaScript 下载带有 Google Picker 的 Google 表格？

Question

我正在尝试在我的网站上使用 JavaScript 实现 Google Picker 和 Google Drive API。目前，我使用 PHP 脚本来获取 Google 云端硬盘文档，但它使用受限范围，我想从我的应用程序中删除受限范围。

首先，我得到了Google Picker quickstart code working 。我尝试添加 Google Drive get使用我在 Google Picker 代码中获取的访问 token 。 Google Drive 代码出现在 client.js 中，对吧？ api.js 中使用的访问 token 与 client.js 中使用的访问 token 兼容吗？

我找到了an old Gist from six years ago并尝试对其进行整合和更新。这是我现在的代码。 gapi.client.drive.files.get 获取文件失败。

// Scope to use to access user's photos.
var scope = 'https://www.googleapis.com/auth/drive.file';

var pickerApiLoaded = false;
var driveApiLoaded = false;
var oauthToken;

// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
    gapi.load('auth2', onAuthApiLoad);
    gapi.load('picker', onPickerApiLoad);
}

function onClientLoad() {
    gapi.client.setApiKey(developerKey);
    gapi.client.load('drive', 'v2', onDriveApiLoad);
}

function onAuthApiLoad() {
    var authBtn = document.getElementById('auth');
    authBtn.disabled = false;
    authBtn.addEventListener('click', function() {
        gapi.auth2.init({ client_id: clientId }).then(function(googleAuth) {
            googleAuth.signIn({ scope: scope }).then(function(result) {
                handleAuthResult(result.getAuthResponse());
            })
        })
    });
}

function onPickerApiLoad() {
    pickerApiLoaded = true;
    createPicker();
}

function onDriveApiLoad() {
    driveApiLoaded = true;
}

function handleAuthResult(authResult) {
    if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
    }
}

// Create and render a Picker object for picking user Photos.
function createPicker() {
    if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.DocsView(google.picker.ViewId.SPREADSHEETS);
        //view.setMimeTypes("text/csv");
        //view.setMode(google.picker.DocsViewMode.LIST);
        view.setQuery(jQuery('[updateparam="name"]').val());

        var picker = new google.picker.PickerBuilder().
                //addView(google.picker.ViewId.DOCS).
                addView(view).
                setInitialView(view).
                setOAuthToken(oauthToken).
                setDeveloperKey(developerKey).
                setCallback(pickerCallback).
                build();
        picker.setVisible(true);
    }
}

// A simple callback implementation.
function pickerCallback(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        var fileId = doc[google.picker.Document.ID];
        jQuery('[updateparam="googleDriveFileId"]').val(fileId);

        //if (driveApiLoaded) {
            var request = gapi.client.drive.files.get({
                'fileId': fileId
            });
            request.execute(function(file) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', file.downloadUrl);
                xhr.setRequestHeader('Authorization', 'Bearer ' + oauthToken);
                xhr.onload = function() {
                    console.log(xhr.responseText);
                };
                xhr.onerror = function() {
                    warningMessage.displayMessage('Failed to download Google Drive document ' + fileId);
                };          
            });
        //} else {
        //  warningMessage.displayMessage('Google Drive API has not been loaded.');
        //}
    }
    // Triggers before Picker is shown
    // else {
    //  warningMessage.displayMessage('No Google Drive document selected.');
    //}
}

还有我的脚本标签:

<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=KEY"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>

Answer 1

问题是，当您尝试检索 file.downloadUrl 中的 downloadUrl 属性时，该字段在 Drive API 版本 3 中不再存在(在版本 2 中)，请检查 v2 [1] 并v3 [2]。

相反，您应该使用 webContentLink 属性来下载文件，该属性适用于具有图像、pdf 等二进制内容的文件，但不适用于 google 文档和工作表(它仅适用于 webViewLink 属性，该属性是文件)[2]。对于这些情况(文档和工作表)，您可以实现 import 方法，该方法适用于转换 google 文档并返回文件对象 [3]。导入请求将如下所示:

var request = gapi.client.drive.files.import({ 'fileId': fileId, 'mimeType': mimeType });

使用 mimeType 作为您想要的目标文档(pdf、txt 等)。然后，在回调内部，与其他情况一样使用 file.webContentLink 访问该属性。

[1] https://developers.google.com/drive/api/v2/reference/files

[2] https://developers.google.com/drive/api/v3/reference/files

[3] https://developers.google.com/drive/api/v3/reference/files/export