Tambahkan tombol "Simpan ke Drive"

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

Saat pengguna mengklik tombol tersebut, 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 mereka tetapkan.

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 origin browser yang sama, URL ini harus disalurkan dari domain yang sama dengan halaman tempat URL 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 menyajikan 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 simpan.

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

Anda dapat menempatkan atribut ini pada elemen HTML mana pun. Namun, elemen yang paling sering digunakan adalah div, span, atau button. Setiap elemen ini ditampilkan sedikit berbeda saat halaman dimuat karena browser merender elemen sebelum JavaScript "Save to Drive" merender ulang elemen.

Skrip ini harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana saja pada 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 bawah halaman 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 berbeda diklik, tombol tersebut akan disimpan secara berurutan.

Menangani tombol dan resource di berbagai domain

Jika tombol "Save to 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 yang berbeda.

Misalnya, jika tombol "Simpan ke Drive" ditempatkan pada halaman di http://example.com/page.html, dan sumber data ditetapkan sebagai data-src="https://otherserver.com/files/file.pdf", tombol tersebut tidak akan dapat 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 OPSI 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 menentukan domain yang memiliki akses ke resource tersebut melalui CORS, seperti http://example.com/page.html. Jika Anda tidak memiliki server untuk menghosting konten, pertimbangkan untuk menggunakan Google App Engine.

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

JavaScript API

JavaScript tombol "Simpan ke Drive" menentukan dua fungsi rendering tombol pada 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".
penampung
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 key-value pair, tanpa awalan data-. Misalnya, {"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" yang akan dirender. Tentukan ID penampung (string) atau elemen DOM itu sendiri. Jika parameter opt_container dihilangkan, semua tag "Simpan ke 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 render 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>

Melokalkan tombol "Simpan ke Drive"

Jika halaman web Anda mendukung bahasa tertentu, tetapkan variabel window.___gcfg.lang ke bahasa tersebut. Jika tidak disetel, 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, verifikasi bahwa resource tersebut benar-benar ada dan Anda tidak memiliki masalah CORS.

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