"ذخیره در Drive" دکمه

دکمه «ذخیره در درایو» به کاربران اجازه می‌دهد تا فایل‌ها را از وب‌سایت شما در درایو ذخیره کنند. برای مثال، فرض کنید وب‌سایت شما چندین دفترچه راهنما (PDF) را که کاربران می‌توانند دانلود کنند، فهرست کرده است. دکمه «ذخیره در درایو» را می‌توان در کنار هر دفترچه راهنما قرار داد و به کاربران اجازه داد تا دفترچه‌های راهنما را در My Drive خود ذخیره کنند.

وقتی کاربر روی دکمه کلیک می‌کند، فایل از منبع داده دانلود شده و همزمان با دریافت داده‌ها در گوگل درایو آپلود می‌شود. از آنجا که دانلود در بستر مرورگر کاربر انجام می‌شود، این فرآیند به کاربر اجازه می‌دهد تا با استفاده از نشست مرورگر ایجاد شده خود، اقدام به ذخیره فایل‌ها را تأیید کند.

مرورگرهای پشتیبانی شده

دکمه «ذخیره در درایو» از این مرورگرها پشتیبانی می‌کند.

دکمه «ذخیره در درایو» را به یک صفحه اضافه کنید

برای ایجاد نمونه‌ای از دکمه‌ی «ذخیره در درایو»، اسکریپت زیر را به صفحه‌ی وب خود اضافه کنید:

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

کجا:

• class یک پارامتر الزامی است که اگر از یک تگ استاندارد HTML استفاده می‌کنید، باید روی g-savetodrive تنظیم شود.

• data-src یک پارامتر اجباری است که حاوی آدرس فایلی است که قرار است ذخیره شود.

  • URL ها می توانند مطلق یا نسبی باشند.
  • آدرس اینترنتی data-src می‌تواند از همان دامنه، زیر دامنه و پروتکل دامنه‌ای که دکمه در آن میزبانی می‌شود، ارائه شود. شما باید از پروتکل‌های منطبق بین صفحه و منبع داده استفاده کنید.
  • آدرس‌های داده (Data URI) و آدرس‌های file:// پشتیبانی نمی‌شوند.
  • با توجه به سیاست مبدا یکسان مرورگر، این URL باید از همان دامنه‌ای که صفحه‌ای که در آن قرار دارد، ارائه شود، یا با استفاده از اشتراک‌گذاری منابع بین مبداها (CORS) قابل دسترسی باشد. اگر دکمه و منبع در دامنه‌های مختلف هستند، به بخش «دسته‌بندی دکمه‌ها و منابع در دامنه‌های مختلف » (#domain) مراجعه کنید.
  • برای ارائه فایل زمانی که یک صفحه هم توسط http و هم توسط https ارائه می‌شود، منبع را بدون پروتکل مشخص کنید، مانند data-src="//example.com/files/file.pdf" که از پروتکل مناسب بر اساس نحوه دسترسی به صفحه میزبانی استفاده می‌کند.

• data-filename یک پارامتر اجباری است که حاوی نامی است که برای ذخیره فایل استفاده می‌شود.

• data-sitename یک پارامتر اجباری است که حاوی نام وب‌سایت ارائه‌دهنده فایل است.

شما می‌توانید این ویژگی‌ها را روی هر عنصر HTML قرار دهید. با این حال، رایج‌ترین عناصر مورد استفاده div ، span یا button هستند. هر یک از این عناصر هنگام بارگذاری صفحه کمی متفاوت نمایش داده می‌شوند، زیرا مرورگر عنصر را قبل از اینکه جاوا اسکریپت "Save to Drive" عنصر را دوباره رندر کند، رندر می‌کند.

این اسکریپت باید با استفاده از پروتکل HTTPS بارگذاری شود و می‌تواند بدون محدودیت از هر نقطه‌ای از صفحه بارگذاری شود. همچنین می‌توانید برای بهبود عملکرد، اسکریپت را به صورت غیرهمزمان بارگذاری کنید.

استفاده از چندین دکمه در یک صفحه

می‌توانید چندین دکمه «ذخیره در درایو» را در یک صفحه قرار دهید. برای مثال، ممکن است یک دکمه در بالا و پایین یک صفحه طولانی داشته باشید.

اگر پارامترهای data-src و data-filename برای چندین دکمه یکسان باشند، ذخیره از یک دکمه باعث می‌شود که تمام دکمه‌های مشابه اطلاعات پیشرفت یکسانی را نمایش دهند. اگر چندین دکمه مختلف کلیک شوند، آنها به ترتیب ذخیره می‌شوند.

مدیریت دکمه‌ها و منابع در دامنه‌های مختلف

اگر دکمه «ذخیره در درایو» شما در صفحه‌ای جدا از منبع داده قرار دارد، درخواست ذخیره فایل باید از اشتراک‌گذاری منابع بین‌منبعی (CORS) برای دسترسی به منبع استفاده کند. CORS مکانیزمی است که به یک برنامه وب در یک دامنه اجازه می‌دهد تا به منابع سروری در دامنه‌ای دیگر دسترسی پیدا کند.

برای مثال، اگر دکمه‌ی «ذخیره در درایو» در صفحه‌ای به http://example.com/page.html قرار داده شده باشد و منبع داده به صورت data-src="https://otherserver.com/files/file.pdf" مشخص شده باشد، دکمه نمی‌تواند به فایل PDF دسترسی پیدا کند، مگر اینکه مرورگر بتواند از CORS برای دسترسی به منبع استفاده کند.

URL مربوط به data-src می‌تواند از دامنه دیگری ارائه شود، اما پاسخ‌های دریافتی از سرور HTTP باید از درخواست‌های HTTP OPTION پشتیبانی کنند و شامل هدرهای HTTP ویژه زیر باشند:

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

Access-Control-Allow-Origin می‌تواند مقدار * را برای اجازه دادن به CORS از هر دامنه‌ای داشته باشد یا می‌تواند دامنه‌هایی را که از طریق CORS به منبع دسترسی دارند، مانند http://example.com/page.html ، مشخص کند. اگر سروری برای میزبانی محتوای خود ندارید، استفاده از Google App Engine را در نظر بگیرید.

برای اطلاعات بیشتر، به مستندات سرور خود در مورد نحوه فعال کردن CORS از مبدا که دکمه "ذخیره در درایو" را ارائه می‌دهد، مراجعه کنید. برای اطلاعات بیشتر در مورد فعال کردن سرور خود برای CORS، به "می‌خواهم پشتیبانی CORS را به سرور خود اضافه کنم" مراجعه کنید.

رابط برنامه‌نویسی جاوا اسکریپت

دکمه "ذخیره در درایو" در جاوا اسکریپت دو تابع رندر دکمه را در فضای نام gapi.savetodrive تعریف می‌کند. اگر رندر خودکار را غیرفعال کنید، باید با تنظیم parsetags به explicit یکی از این توابع را فراخوانی کنید.

مثال "ذخیره در Drive" جاوا اسکریپت با بارگذاری صریح

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

مثال "ذخیره در درایو" جاوا اسکریپت با رندر صریح

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

دکمه «ذخیره در درایو» را محلی‌سازی کنید

اگر صفحه وب شما از زبان خاصی پشتیبانی می‌کند، متغیر window.___gcfg.lang را روی آن زبان تنظیم کنید. اگر تنظیم نشود، زبان گوگل درایو کاربر استفاده می‌شود.

برای مقادیر کد زبان موجود، به لیست کدهای زبان پشتیبانی شده مراجعه کنید.

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

عیب‌یابی

اگر هنگام دانلود URL data-src خود با خطای XHR مواجه شدید، تأیید کنید که منبع واقعاً وجود دارد و مشکل CORS ندارید.

اگر فایل‌های بزرگ به ۲ مگابایت کاهش داده شوند، احتمالاً سرور شما Content-Range را نمایش نمی‌دهد، احتمالاً مشکل CORS وجود دارد.