Tambahkan tombol "Simpan ke Drive"

Tombol "Simpan ke Drive" memungkinkan pengguna menyimpan file ke Drive dari situs Anda. Misalnya, situs Anda mencantumkan beberapa manual petunjuk (PDF) yang dapat didownload pengguna. Tombol "Simpan ke Drive" dapat ditempatkan di samping setiap manual, sehingga pengguna dapat menyimpan manual ke Drive Saya mereka.

Saat pengguna mengklik tombol, file akan didownload dari sumber data dan diupload ke Google Drive saat data diterima. Karena download dilakukan dalam konteks browser pengguna, proses ini memungkinkan pengguna mengautentikasi tindakan untuk menyimpan file menggunakan sesi browser yang telah dibuat.

Browser yang didukung

Tombol "Simpan ke Drive" mendukung browser ini.

Menambahkan tombol "Simpan ke Drive" ke halaman

Untuk membuat instance tombol "Simpan ke Drive", tambahkan skrip berikut ke halaman web Anda:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

Dengan keterangan:

  • class adalah parameter wajib yang harus ditetapkan ke g-savetodrive jika Anda menggunakan tag HTML standar.

  • data-src adalah parameter wajib yang berisi URL file yang akan disimpan.

    • URL dapat bersifat absolut atau relatif.
    • URL data-src dapat ditayangkan dari domain, subdomain, dan protokol yang sama dengan domain tempat tombol dihosting. Anda harus menggunakan protokol yang cocok antara halaman dan sumber data.
    • URI Data dan URL file:// tidak didukung.
    • Karena kebijakan asal yang sama di browser, URL ini harus ditayangkan dari domain yang sama dengan halaman tempat URL tersebut ditempatkan, atau dapat diakses menggunakan Cross Origin Resource Sharing (CORS). Jika tombol dan resource berada di domain yang berbeda, lihat Menangani tombol dan resource di domain yang berbeda.(#domain).
    • Untuk menayangkan file saat halaman yang sama ditayangkan oleh http dan https, tentukan resource tanpa protokol seperti data-src="//example.com/files/file.pdf", yang menggunakan protokol yang sesuai berdasarkan cara halaman hosting diakses.

  • data-filename adalah parameter wajib yang berisi nama yang digunakan untuk file tersimpan.

  • data-sitename adalah parameter wajib yang berisi nama situs web yang menyediakan file.

Anda dapat menempatkan atribut ini di elemen HTML mana pun. Namun, elemen yang paling umum digunakan adalah div, span, atau button. Setiap elemen ini ditampilkan dengan sedikit perbedaan saat halaman dimuat karena browser merender elemen sebelum JavaScript "Simpan ke Drive" merender ulang elemen.

Skrip ini harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana pun di halaman tanpa batasan. Anda juga dapat memuat skrip secara asinkron untuk meningkatkan performa.

Menggunakan beberapa tombol di halaman

Anda dapat menempatkan beberapa tombol "Simpan ke Drive" di halaman yang sama. Misalnya, Anda mungkin memiliki tombol di bagian atas dan di bagian bawah halaman yang panjang.

Jika parameter data-src dan data-filename sama untuk beberapa tombol, menyimpan dari satu tombol akan menyebabkan semua tombol serupa menampilkan informasi progres yang sama. Jika beberapa tombol yang berbeda diklik, tombol tersebut akan disimpan secara berurutan.

Menangani tombol dan resource di domain yang berbeda

Jika tombol "Simpan ke Drive" berada di halaman terpisah dari sumber data, permintaan untuk menyimpan file harus menggunakan Cross Origin Resource Sharing (CORS) untuk mengakses resource. CORS adalah mekanisme yang memungkinkan aplikasi web di satu domain mengakses resource dari server di domain lain.

Misalnya, jika tombol "Simpan ke Drive" ditempatkan di halaman pada http://example.com/page.html, dan sumber data ditentukan sebagai data-src="https://otherserver.com/files/file.pdf", tombol tersebut akan gagal mengakses PDF kecuali jika browser dapat menggunakan CORS untuk mengakses resource.

URL data-src dapat ditayangkan dari domain lain, tetapi respons dari server HTTP harus mendukung permintaan OPTION HTTP dan menyertakan header HTTP khusus berikut:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Access-Control-Allow-Origin dapat memiliki nilai * untuk mengizinkan CORS dari domain mana pun atau dapat menentukan domain yang memiliki akses ke resource melalui CORS, seperti http://example.com/page.html. Jika Anda tidak memiliki server untuk menghosting konten, pertimbangkan untuk menggunakan Google App Engine.

Untuk informasi selengkapnya, lihat dokumentasi server Anda tentang cara mengaktifkan CORS dari origin yang menayangkan tombol "Simpan ke Drive". Untuk informasi selengkapnya tentang cara mengaktifkan server untuk CORS, lihat Saya ingin menambahkan dukungan CORS ke server.

JavaScript API

JavaScript tombol "Simpan ke Drive" menentukan dua fungsi rendering tombol di bawah namespace gapi.savetodrive. Jika menonaktifkan rendering otomatis, Anda harus memanggil salah satu fungsi ini dengan menetapkan parsetags ke explicit.

Metode Deskripsi
gapi.savetodrive.render(
container,
parameters
)		 Merender penampung yang ditentukan sebagai widget tombol "Simpan ke Drive".
container
Penampung yang akan dirender sebagai tombol "Simpan ke Drive". Tentukan ID penampung (string) atau elemen DOM itu sendiri.
parameter
Objek yang berisi atribut tag "Simpan ke Drive" sebagai pasangan kunci=nilai, tanpa awalan data-. Contoh, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 Merender semua tag dan class "Simpan ke Drive" di penampung yang ditentukan. Fungsi ini hanya boleh digunakan jika parsetags ditetapkan ke explicit, yang mungkin Anda lakukan karena alasan performa.
opt_container
Penampung yang berisi tag tombol "Simpan ke Drive" untuk dirender. Tentukan ID penampung (string) atau elemen DOM itu sendiri. Jika parameter opt_container dihilangkan, semua tag "Save to Drive" di halaman akan dirender.

Contoh JavaScript "Simpan ke Drive" dengan pemuatan eksplisit

<!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Load</title>
        <link rel="canonical" href="http://www.example.com">
        <script src="https://apis.google.com/js/platform.js" async defer>
          {parsetags: 'explicit'}
        </script>
      </head>
      <body>
        <div id="container">
          <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
          <div>
        </div>
        <script type="text/javascript">
          gapi.savetodrive.go('container');
        </script>
      </body>
    </html>

Contoh JavaScript "Simpan ke Drive" dengan rendering eksplisit

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Render</title>
        <link rel="canonical" href="http://www.example.com">
        <script>
          window.___gcfg = {
            parsetags: 'explicit'
          };
        </script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
      </head>
      <body>
        <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
        <div id="savetodrive-div"></div>
        <script>
          function renderSaveToDrive() {
            gapi.savetodrive.render('savetodrive-div', {
              src: '//example.com/path/to/myfile.pdf',
              filename: 'My Statement.pdf',
              sitename: 'My Company Name'
            });
          }
          document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
        </script>
      </body>
    </html>

Menlokalkan tombol "Simpan ke Drive"

Jika halaman web Anda mendukung bahasa tertentu, tetapkan variabel window.___gcfg.lang ke bahasa tersebut. Jika tidak ditetapkan, bahasa Google Drive pengguna akan digunakan.

Untuk mengetahui nilai kode bahasa yang tersedia, lihat daftar kode bahasa yang didukung.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Async Load with Language</title>
        <link rel="canonical" href="http://www.example.com">
      </head>
      <body>
        <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
        </div>

        <script type="text/javascript">
          window.___gcfg = {
            lang: 'en-US'
          };
        </script>
        <script src = 'https://apis.google.com/js/platform.js' async defer></script>

      </body>
    </html>

Pemecahan masalah

Jika Anda mendapatkan error XHR saat mendownload URL data-src, pastikan resource benar-benar ada, dan Anda tidak memiliki masalah CORS.

Jika file besar terpotong menjadi 2 MB, kemungkinan server Anda tidak mengekspos Content-Range, kemungkinan masalah CORS.