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 manual, sehingga pengguna dapat menyimpan manual ke Drive Saya.

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 ditetapkan.

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:

  • 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 yang sama pada browser, URL ini harus disajikan 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 simpanan.

  • data-sitename adalah parameter wajib yang berisi nama situs 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 sedikit berbeda 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 satu halaman

Anda dapat menempatkan beberapa tombol "Simpan ke Drive" di halaman yang sama. Misalnya, Anda mungkin memiliki tombol di bagian atas dan 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 yang berbeda.

Misalnya, jika tombol "Simpan ke Drive" ditempatkan di halaman di 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 disajikan dari domain lain, tetapi respons dari server HTTP harus mendukung permintaan HTTP OPTION 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 menyajikan tombol "Simpan ke Drive". Untuk mengetahui informasi selengkapnya tentang cara mengaktifkan server untuk CORS, lihat Saya ingin menambahkan dukungan CORS ke server saya.

JavaScript API

JavaScript tombol "Simpan ke Drive" menentukan dua fungsi rendering tombol di bawah namespace gapi.savetodrive. Jika Anda 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" dalam 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 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 tersebut benar-benar ada, dan Anda tidak mengalami masalah CORS.

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