Question

我正在设置一个React App，它可以从用户的私人Google表格中读取数据。

我正在使用react-google-picker程序包，并设法获得了所选工作表的fileId。使用此fileId和OAuthToken，我使用axios发出一个HTTP请求，该请求以文件元数据作为响应。但是，我想使用Google Sheets API访问电子表格本身中包含的数据。如何使用响应数据访问或下载电子表格？

import React, { Component } from 'react';

import GooglePicker from 'react-google-picker';

import axios from 'axios';

class App extends Component {
  state = {
    fileId: "",
    authToken: ""
  }
  componentDidUpdate() {
    console.log(this.state.fileId);
    console.log(this.state.authToken);
    const url = "https://www.googleapis.com/drive/v3/files/" + 
      this.state.fileId + 
      "?key=<MY-API-KEY>" + 
      "?alt=media";
    axios.get(url, {headers: {"Authorization": "Bearer " + this.state.authToken}})
      .then(response => console.log(response.data))
      .catch(error => console.log(error));
  }
  render () {
    return (
      <div>
        <GooglePicker clientId={'<MY-CLIENT-ID>'}
                      developerKey={'<MY-API-KEY>'}
                      scope={['https://www.googleapis.com/auth/drive.readonly']}
                      onChange={data => {
                        data.docs ? this.setState({fileId: data.docs[0].id}) : console.log('on change:', data);
                      }}
                      onAuthenticate={token => {
                        console.log('oauth token:', token);
                        this.setState({authToken: token});
                      }}
                      onAuthFailed={data => console.log('on auth failed:', data)}
                      multiselect={true}
                      navHidden={true}
                      authImmediate={false}
                      mimeTypes={['application/vnd.google-apps.spreadsheet']}
                      viewId={'SPREADSHEETS'}>
           <button>Click</button>
        </GooglePicker>
      </div>
    );
  }
}

export default App;

Answer 1

以下是https://wiki.jenkins.io/display/JENKINS/JenkinsBehindProxy中的示例代码：

var files = data[google.picker.Response.DOCUMENTS];
// loop over selected files 
for (var i = 0; i < files.length; i++) {
    // get file id, and request to get the file
    var id = files[i][google.picker.Document.ID],
        request = gapi.client.drive.files.get({
            fileId: id
        });
    // execute request for file 
    request.execute(this._fileGetCallback.bind(this));
}

请注意，您需要在enableFeature(google.picker.Feature.MULTISELECT_ENABLED)之后添加this.picker = new google.picker.PickerBuilder()这一行，以启用多个文件选择。

示例：

_showPicker: function() {
            var accessToken = gapi.auth.getToken().access_token;
            this.picker = new google.picker.PickerBuilder().
                addView(google.picker.ViewId.DOCUMENTS).
                setAppId(this.clientId).
                setOAuthToken(accessToken).
                setCallback(this._pickerCallback.bind(this)).
                build().
                setVisible(true);
          enableFeature(google.picker.Feature.MULTISELECT_ENABLED) // added code
        },

在React App上从Google Picker中的选定工作表访问数据

1 个答案: