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

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

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

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

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

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

כדי ליצור לחצן "Save to 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 הזו חייבת להיות מוצגת מאותו דומיין של הדף שבו היא מוצבת, או שהיא נגישה באמצעות Cross Origin Resource Sharing (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 זהים במספר לחצנים, שמירה בלחיצה אחת תגרום לכל הלחצנים הדומים להציג את אותו מידע התקדמות. אם לוחצים על מספר לחצנים שונים, הם נשמרים ברצף.

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

אם הלחצן 'Save to Drive' נמצא בדף נפרד ממקור הנתונים, כדי לקבל גישה למשאב בבקשה לשמור את הקובץ, צריך להשתמש ב-Cross Origin Resource Sharing. CORS היא מנגנון שמאפשר לאפליקציית אינטרנט בדומיין אחד לגשת למשאבים משרת בדומיין אחר.

לדוגמה, אם הלחצן 'Save to 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 לשרת שלי.

ממשק API של JavaScript

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

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