הוסף את הלחצן "שמירה ב-Drive"

הלחצן "שמירה ב-Drive" מאפשר למשתמשים לשמור קבצים ב-Drive מהאתר שלכם. לדוגמה, נניח שבאתר שלכם יש כמה מדריכים (קובצי PDF) שמשתמשים יכולים להוריד. אפשר להציב את הלחצן "שמירה ב-Drive" לצד כל מדריך, כדי לאפשר למשתמשים לשמור מדריכים בתיקיית "האחסון שלי".

כשהמשתמש לוחץ על הכפתור, הקובץ יורד ממקור הנתונים ומועלה ל-Google Drive כשהנתונים מתקבלים. מכיוון שההורדה מתבצעת בהקשר של דפדפן המשתמש, התהליך הזה מאפשר למשתמש לאמת את הפעולה של שמירת הקבצים באמצעות הסשן שהוגדר בדפדפן.

דפדפנים נתמכים

הלחצן "שמירה ב-Drive" נתמך בדפדפנים האלה.

הוספת הלחצן "שמירה ב-Drive" לדף

כדי ליצור מופע של הלחצן "שמירה ב-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 הוא פרמטר חובה שצריך להגדיר כ-g-savetodrive אם משתמשים בתג HTML רגיל.

  • ‫data-src הוא פרמטר חובה שמכיל את כתובת ה-URL של הקובץ שרוצים לשמור.

    • כתובות URL יכולות להיות מוחלטות או יחסיות.
    • אפשר להציג את כתובת ה-URL של data-src מאותו דומיין, תת-דומיין ופרוטוקול כמו הדומיין שבו הלחצן מתארח. הפרוטוקולים של הדף ושל מקור הנתונים חייבים להיות זהים.
    • אין תמיכה במזהי URI של נתונים ובכתובות URL של file://.
    • בגלל מדיניות המקור הזהה של הדפדפן, כתובת ה-URL הזו צריכה להיות מאותו דומיין של הדף שבו היא נמצאת, או להיות נגישה באמצעות שיתוף משאבים בין מקורות (CORS). אם הכפתור והמשאב נמצאים בדומיינים שונים, עיינו בקטע טיפול בכפתורים ובמשאבים בדומיינים שונים.(#domain).
    • כדי להציג את הקובץ כשאותו דף מוצג גם ב-http וגם ב-https, צריך לציין את המשאב בלי פרוטוקול, למשל data-src="//example.com/files/file.pdf", שמשתמש בפרוטוקול המתאים על סמך האופן שבו ניגשו לדף המארח.

  • ‫data-filename הוא פרמטר חובה שמכיל את השם שמשמש לקובץ השמירה.

  • ‫data-sitename הוא פרמטר חובה שמכיל את שם האתר שמספק את הקובץ.

אפשר להוסיף את המאפיינים האלה לכל רכיב HTML. עם זאת, הרכיבים הנפוצים ביותר הם div, ‏span או button. כל אחד מהרכיבים האלה מוצג בצורה קצת שונה בזמן שהדף נטען, כי הדפדפן מעבד את הרכיב לפני שקוד ה-JavaScript של "שמירה ב-Drive" מעבד אותו מחדש.

צריך לטעון את הסקריפט הזה באמצעות פרוטוקול HTTPS, ואפשר לכלול אותו מכל מקום בדף ללא הגבלה. אפשר גם לטעון את הסקריפט באופן אסינכרוני כדי לשפר את הביצועים.

שימוש בכמה כפתורים בדף אחד

אפשר להציב כמה לחצני "שמירה ב-Drive" באותו דף. לדוגמה, יכול להיות שיהיה לכם כפתור בחלק העליון ובחלק התחתון של דף ארוך.

אם הפרמטרים data-src ו-data-filename זהים בכמה כפתורים, שמירה מכפתור אחד תגרום לכל הכפתורים הדומים להציג את אותו מידע על ההתקדמות. אם לוחצים על כמה כפתורים שונים, הם נשמרים ברצף.

טיפול בלחצנים ובמשאבים בדומיינים שונים

אם הלחצן "שמירה ב-Drive" נמצא בדף נפרד ממקור הנתונים, הבקשה לשמירת הקובץ צריכה להשתמש בשיתוף משאבים בין מקורות (CORS) כדי לגשת למשאב. ‫CORS הוא מנגנון שמאפשר לאפליקציית אינטרנט בדומיין אחד לגשת למשאבים משרת בדומיין אחר.

לדוגמה, אם הלחצן "שמירה ב-Drive" ממוקם בדף בכתובת 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 מהמקור שמציג את הלחצן "שמירה ב-Drive". למידע נוסף על הפעלת CORS בשרת, ראו אני רוצה להוסיף תמיכה ב-CORS לשרת שלי.

JavaScript API

ה-JavaScript של הלחצן "שמירה ב-Drive" מגדיר שתי פונקציות לעיבוד הלחצן במרחב השמות gapi.savetodrive. אם משביתים את העיבוד האוטומטי, צריך להגדיר את parsetags ל-explicit כדי להפעיל את אחת מהפונקציות האלה.

שיטה תיאור
gapi.savetodrive.render(
container,
parameters
)		 הפונקציה מעבדת את מאגר התגים שצוין כווידג'ט של לחצן "שמירה ב-Drive".
מאגר
המאגר שיוצג בתור הלחצן "שמירה ב-Drive". צריך לציין את המזהה של מאגר התגים (מחרוזת) או את רכיב ה-DOM עצמו.
פרמטרים
אובייקט שמכיל מאפייני תג של "שמירה ב-Drive" כצמדי מפתח=ערך, בלי הקידומות 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" בדף עוברים רינדור.

דוגמה ל-JavaScript של "שמירה ב-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>

דוגמה ל-JavaScript של "שמירה ב-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>

התאמה לשוק המקומי של הלחצן "שמירה ב-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>

פתרון בעיות

אם מופיעה שגיאת XHR כשמורידים את כתובת ה-URL של data-src, צריך לוודא שהמשאב באמת קיים ושאין בעיית CORS.

אם קבצים גדולים נחתכים ל-2MB, סביר להניח שהשרת שלכם לא חושף את Content-Range, כנראה בגלל בעיית CORS.