הוסף את הלחצן "שמירה ב-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 בשרת, אפשר לעיין במאמר I want to add CORS support to my server.

‫JavaScript API

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

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

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