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