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

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

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

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

دکمه "Save to Drive" از این مرورگرها پشتیبانی می کند.

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

برای ایجاد یک نمونه از دکمه "Save to 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 فایلی است که باید ذخیره شود.

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

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

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

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

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

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

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

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

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

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

به عنوان مثال، اگر دکمه "ذخیره در Drive" در صفحه http://example.com/page.html قرار داده شود و منبع داده به عنوان data-src="https://otherserver.com/files/file.pdf" مشخص شود. 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 را به سرور خود اضافه کنم مراجعه کنید.

JavaScript API

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

روش شرح
gapi.savetodrive. render (
container ,
parameters
)		 ظرف مشخص شده را به عنوان ویجت دکمه "ذخیره در درایو" ارائه می کند.
ظرف
ظرفی که باید به‌عنوان دکمه «ذخیره در Drive» ارائه شود. شناسه کانتینر (رشته) یا خود عنصر DOM را مشخص کنید.
مولفه های
یک شی حاوی ویژگی های برچسب "ذخیره در درایو" به عنوان جفت کلید=مقدار، بدون پیشوندهای data- . برای مثال {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"} .
gapi.savetodrive. go (
opt_container
)		 همه برچسب‌ها و کلاس‌های «ذخیره در Drive» را در ظرف مشخص شده ارائه می‌کند. این تابع باید فقط در صورتی استفاده شود که parsetags به صورت explicit تنظیم شده باشد، که ممکن است به دلایل عملکرد این کار را انجام دهید.
opt_container
ظرف حاوی برچسب‌های دکمه «ذخیره در Drive» برای ارائه. شناسه کانتینر (رشته) یا خود عنصر DOM را مشخص کنید. اگر پارامتر opt_container حذف شود، همه برچسب‌های "ذخیره در Drive" در صفحه نمایش داده می‌شوند.

به عنوان مثال جاوا اسکریپت "ذخیره در 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>

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

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

دکمه "Save to Drive" را محلی کنید

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

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

    <!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 ندارید.

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