"Drive'a Kaydet" düğmesini ekleyin

"Drive'a Kaydet" düğmesi, kullanıcıların web sitenizden Drive'a dosya kaydetmesine olanak tanır. Örneğin, web sitenizde kullanıcıların indirebileceği çeşitli talimat kılavuzları (PDF'ler) listelendiğini varsayalım. "Drive'a Kaydet" düğmesi, kullanıcıların kılavuzları Drive'ım klasörüne kaydetmelerine olanak tanımak için her bir kılavuzun yanına yerleştirilebilir.

Kullanıcı düğmeyi tıkladığında dosya veri kaynağından indirilir ve veri alındıkça Google Drive'a yüklenir. İndirme işlemi kullanıcının tarayıcısı bağlamında yapıldığından, bu işlem kullanıcının kurulan tarayıcı oturumunu kullanarak dosyaları kaydetmek için işlem kimliğini doğrulamasına olanak tanır.

Desteklenen tarayıcılar

"Drive'a Kaydet" düğmesi bu tarayıcıları destekler.

"Drive'a Kaydet" düğmesini bir sayfaya ekleyin

"Drive'a Kaydet" düğmesinin bir örneğini oluşturmak için web sayfanıza aşağıdaki komut dosyasını ekleyin:

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

Burada:

  • Standart HTML etiketi kullanıyorsanız class, g-savetodrive olarak ayarlanması gereken zorunlu bir parametredir.

  • data-src, kaydedilecek dosyanın URL'sini içeren zorunlu bir parametredir.

    • URL'ler mutlak veya göreli olabilir.
    • data-src URL'si, düğmenin barındırıldığı alanla aynı alan adı, alt alan ve protokolden yayınlanabilir. Sayfa ve veri kaynağı arasında eşleştirme protokolleri kullanmanız gerekir.
    • Veri URI'leri ve file:// URL'leri desteklenmez.
    • Tarayıcının aynı kaynak politikası nedeniyle, bu URL yerleştirildiği sayfayla aynı alan adından sunulmalı veya Kaynaklar Arası Kaynak Paylaşımı (CORS) kullanılarak erişilebilir olmalıdır. Düğme ve kaynak farklı alan adlarındaysa Düğmeleri ve kaynakları farklı alanlardaki işleme(#alan) bölümüne bakın.
    • Aynı sayfa hem http hem de https tarafından sunulduğunda dosyayı sunmak için kaynağı, barındırma sayfasına erişme şekline göre uygun protokolü kullanan data-src="//example.com/files/file.pdf" gibi bir protokol olmadan belirtin.

  • data-filename, kayıt dosyası için kullanılan adı içeren zorunlu bir parametredir.

  • data-sitename, dosyayı sağlayan web sitesinin adını içeren zorunlu bir parametredir.

Bu özellikleri herhangi bir HTML öğesine yerleştirebilirsiniz. Ancak en yaygın şekilde kullanılan öğeler div, span veya button'dir. Tarayıcı, "Drive'a Kaydet" JavaScript'i öğeyi yeniden oluşturmadan önce öğeyi oluşturduğundan, bu öğelerin her biri sayfa yüklenirken biraz farklı görüntülenir.

Bu komut dosyası, HTTPS protokolü kullanılarak yüklenmelidir ve herhangi bir kısıtlama olmaksızın sayfadaki herhangi bir noktadan eklenebilir. Performansı artırmak için komut dosyasını eşzamansız olarak da yükleyebilirsiniz.

Bir sayfada birden çok düğme kullanma

Aynı sayfaya birden fazla "Drive'a Kaydet" düğmesi yerleştirebilirsiniz. Örneğin, uzun bir sayfanın üst ve alt kısmında bir düğmeniz olabilir.

data-src ve data-filename parametreleri birden çok düğme için aynıysa tek bir düğmeden kaydetmek, benzer düğmelerin tümünün aynı ilerleme bilgilerini göstermesine neden olur. Birden fazla farklı düğme tıklandığında bunlar sırayla kaydedilir.

Farklı alanlardaki düğmeleri ve kaynakları kullanın

"Drive'a Kaydet" düğmeniz veri kaynağından ayrı bir sayfadaysa kaynağa erişmek için dosyayı kaydetme isteğinin Kaynaklar Arası Kaynak Paylaşımı (CORS) kullanması gerekir. CORS, bir alandaki web uygulamasının farklı bir alandaki sunucudan kaynaklara erişmesine olanak tanıyan bir mekanizmadır.

Örneğin, http://example.com/page.html adresindeki sayfaya "Drive'a Kaydet" düğmesi yerleştirilirse ve veri kaynağı data-src="https://otherserver.com/files/file.pdf" olarak belirtilirse tarayıcı, kaynağa erişmek için CORS'u kullanamadığı sürece düğme PDF'ye erişemez.

data-src URL'si başka bir alan adından sunulabilir ancak HTTP sunucusundan alınan yanıtların HTTP OPTION isteklerini desteklemesi ve aşağıdaki özel HTTP üst bilgilerini içermesi gerekir:

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

Access-Control-Allow-Origin, herhangi bir alandan CORS'ye izin vermek için * değerine sahip olabilir veya CORS aracılığıyla kaynağa erişimi olan alanları (http://example.com/page.html gibi) belirtebilir. İçeriğinizi barındıracak bir sunucunuz yoksa Google App Engine'i kullanabilirsiniz.

Daha fazla bilgi edinmek için "Drive'a Kaydet" düğmenizi sunan kaynaktan CORS'yi nasıl etkinleştireceğinizle ilgili sunucu dokümanlarına bakın. Sunucunuzu CORS için etkinleştirme hakkında daha fazla bilgi edinmek için Sunucuma CORS desteği eklemek istiyorum bölümüne bakın.

JavaScript API

"Drive'a Kaydet" düğmesi JavaScript'i, gapi.savetodrive ad alanı altında iki düğme oluşturma işlevi tanımlar. Otomatik oluşturmayı devre dışı bırakırsanız parsetags değerini explicit olarak ayarlayarak bu işlevlerden birini çağırmanız gerekir.

Yöntem Açıklama
gapi.savetodrive.render(
container,
parameters
)		 Belirtilen kapsayıcıyı "Drive'a Kaydet" düğme widget'ı olarak oluşturur.
kapsayıcı
"Drive'a Kaydet" düğmesi olarak oluşturulacak kapsayıcı. Kapsayıcının (dize) kimliğini veya DOM öğesinin kendisini belirtin.
Parametreler
"Drive'a Kaydet" etiketi özelliklerini data- önekleri olmadan anahtar=değer çiftleri olarak içeren bir nesne. Örneğin, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 Belirtilen kapsayıcıdaki tüm "Drive'a Kaydet" etiketlerini ve sınıflarını oluşturur. Bu işlev yalnızca parsetags, explicit olarak ayarlandıysa kullanılmalıdır. Performans nedeniyle bu işlemi yapabilirsiniz.
opt_container
Oluşturulacak "Drive'a Kaydet" düğme etiketlerini içeren kapsayıcı. Kapsayıcının (dize) kimliğini veya DOM öğesinin kendisini belirtin. opt_container parametresi atlanırsa sayfadaki tüm "Drive'a Kaydet" etiketleri oluşturulur.

Açık yüklemeli örnek "Drive'a Kaydet" JavaScript'i

<!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>

Açıkça oluşturma içeren örnek "Drive'a Kaydet" JavaScript'i

    <!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>

"Drive'a Kaydet" düğmesini yerelleştirme

Web sayfanız belirli bir dili destekliyorsa window.___gcfg.lang değişkenini o dile ayarlayın. Politika ayarlanmazsa kullanıcının Google Drive dili kullanılır.

Kullanılabilir dil kodu değerleri için desteklenen dil kodları listesine bakın.

    <!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>

Sorun giderme

data-src URL'nizi indirirken XHR hatası alırsanız kaynağın gerçekten var olduğunu ve CORS sorununuz olmadığını doğrulayın.

Büyük dosyalar 2 MB'a kısaltılırsa sunucunuz İçerik Aralığı'nı göstermiyor olabilir. Bu da büyük olasılıkla bir CORS sorunudur.