Перечисление файлов, сохраненных на Google Диске, на Javascript на HTML веб-странице - PullRequest
Новая
       51

Перечисление файлов, сохраненных на Google Диске, на Javascript на HTML веб-странице

0 голосов
/ 05 апреля 2020

Ситуация:

Привет всем! Я сохранил некоторые таблицы в Google Диске и хочу перечислить все файлы (с гиперссылкой) на веб-странице HTML с Javascript. К настоящему времени я изучал Google API в течение многих часов и нашел два способа получить список файлов.

Сначала я использовал следующий URL-адрес с ключом API, и он возвращает список файлов, подобный JSON (см. ниже). Этот метод может легко получить список файлов без использования OAuth 2.0. (Я предпочитаю использовать этот метод) 

https://www.googleapis.com/drive/v3/files?q="MY_FOLDER_ID"+in+parents&key=MYAPIKEY

Он возвращает следующую информацию: 

{
 "kind": "drive#fileList",
 "incompleteSearch": false,
 "files": [
  {
   "kind": "drive#file",
   "id": "xxxxxxxxx",
   "name": "xxxxx",
   "mimeType": "application/vnd.google-apps.spreadsheet"
  },
  {
   "kind": "drive#file",
   "id": "xxxxxxxxx",
   "name": "xxxxx",
   "mimeType": "application/vnd.google-apps.spreadsheet"
  }
 ]
}


Во-вторых, я набрал следующий код (см. Ниже), чтобы получить список файлов успешно в логе консоли. Этот метод требует от пользователя входа в учетную запись Google для проверки.


Проблема:

Однако я не знаю, как отобразить полученный список файлов на HTML веб-страница. Могу ли я узнать, как использовать полученный JSON -подобный список / журнал файлов для перечисления всех файлов на HTML веб-странице? Спасибо.


Код: 

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.appdata https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/drive.metadata https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/drive.photos.readonly https://www.googleapis.com/auth/drive.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    gapi.client.setApiKey("MY_API_KEY");
    return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/drive/v2/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.drive.children.list({
      "folderId": "MY_FOLDER_ID"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "MY_CLIENT_ID"});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>

1 Ответ

0 голосов
/ 06 апреля 2020

Вы можете использовать Element.insertAdjacent HTML ()

Например, у вас есть такая структура html: 

<table id="drive-file-list">
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>Link</th>
  </tr>
</table>

А теперь вы хотите добавьте туда некоторые данные, например:

12345, Собаки и кошки, https://google.com

Для этого вы можете попробовать это code: 

let html = `
  <tr>
    <td>12345</td>
    <td>Dogs and Cats</td>
    <td><a href="https://google.com">Go to page</a></td>
  </tr>
`;
document.getElementById('drive-file-list').insertAdjacentHTML('beforeend', html);

Адаптируйте его теперь к вашему примеру кода, используя API выборки для получения json ответа, например 

let url = 'https://www.googleapis.com/drive/v3/files?q="MY_FOLDER_ID"+in+parents&key=MYAPIKEY';

fetch(url )
  .then((response) => {
    return response.json();
  })
  .then((data) => {

    // Adapt it from here
    document.getElementById('drive-file-list').insertAdjacentHTML('beforeend', `
      <tr>
        <td>${data.files[0].id}</td>
        <td>${data.files[0].name}</td>
        <td><a href="https://docs.google.com/spreadsheets/d/${data.files[0].id}">Go to page</a></td>
      </tr>
    `)

  });
...