เพิ่มปุ่ม "บันทึกไปที่ไดรฟ์"

ปุ่ม "บันทึกไปยังไดรฟ์" ช่วยให้ผู้ใช้บันทึกไฟล์จากเว็บไซต์ของคุณไปยังไดรฟ์ได้ ตัวอย่างเช่น สมมติว่าเว็บไซต์ของคุณแสดงคู่มือการใช้งาน (PDF) หลายรายการที่ผู้ใช้ดาวน์โหลดได้ ปุ่ม "บันทึกไปยังไดรฟ์" สามารถวางไว้ข้างคู่มือแต่ละรายการเพื่อให้ผู้ใช้บันทึกคู่มือไปยังไดรฟ์ของฉันได้

เมื่อผู้ใช้คลิกปุ่ม ระบบจะดาวน์โหลดไฟล์จากแหล่งข้อมูลและ อัปโหลดไปยัง Google ไดรฟ์เมื่อได้รับข้อมูล เนื่องจาก การดาวน์โหลดเกิดขึ้นในบริบทของเบราว์เซอร์ของผู้ใช้ กระบวนการนี้ จึงอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์การดำเนินการเพื่อบันทึกไฟล์โดยใช้ เซสชันเบราว์เซอร์ที่สร้างขึ้น

เบราว์เซอร์ที่รองรับ

ปุ่ม "บันทึกไปยังไดรฟ์" รองรับเบราว์เซอร์เหล่านี้

เพิ่มปุ่ม "บันทึกลงในไดรฟ์" ลงในหน้าเว็บ

หากต้องการสร้างอินสแตนซ์ของปุ่ม "บันทึกลงในไดรฟ์" ให้เพิ่มสคริปต์ต่อไปนี้ลงใน หน้าเว็บ

<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 นี้จึงต้องแสดงจากโดเมนเดียวกับหน้าที่วาง URL หรือเข้าถึงได้โดยใช้กลไกการแชร์ทรัพยากรข้ามโดเมน (CORS) หากปุ่มและทรัพยากรอยู่ ในโดเมนที่ต่างกัน โปรดดู จัดการปุ่มและทรัพยากรในโดเมนที่ต่างกัน(#domain)
  • หากต้องการแสดงไฟล์เมื่อทั้ง http และ https แสดงหน้าเดียวกัน ให้ระบุทรัพยากรโดยไม่มีโปรโตคอล เช่น data-src="//example.com/files/file.pdf" ซึ่งใช้โปรโตคอลที่เหมาะสม ตามวิธีเข้าถึงหน้าโฮสติ้ง

• data-filename เป็นพารามิเตอร์ที่ต้องระบุซึ่งมีชื่อที่ใช้สำหรับ บันทึกไฟล์

• data-sitename เป็นพารามิเตอร์ที่จำเป็นซึ่งมีชื่อของเว็บไซต์ ที่ให้บริการไฟล์

คุณวางแอตทริบิวต์เหล่านี้ในองค์ประกอบ HTML ใดก็ได้ อย่างไรก็ตาม องค์ประกอบที่ใช้กันมากที่สุดคือ div, span หรือ button องค์ประกอบแต่ละรายการจะแสดงผล แตกต่างกันเล็กน้อยขณะที่หน้าเว็บกำลังโหลด เนื่องจากเบราว์เซอร์แสดงผลองค์ประกอบ ก่อนที่ JavaScript "บันทึกลงในไดรฟ์" จะแสดงผลองค์ประกอบอีกครั้ง

ต้องโหลดสคริปต์นี้โดยใช้โปรโตคอล HTTPS และสามารถรวมจากจุดใดก็ได้ในหน้าเว็บโดยไม่มีข้อจำกัด นอกจากนี้ คุณยังโหลดสคริปต์แบบไม่พร้อมกันเพื่อปรับปรุงประสิทธิภาพได้ด้วย

หมายเหตุ: ปุ่มจะแสดงในบรรทัด ปุ่ม "บันทึกลงในไดรฟ์" สามารถรวมไว้ใน องค์ประกอบอื่นเพื่อให้เลย์เอาต์เริ่มต้นมีลักษณะคล้ายกับเลย์เอาต์สุดท้าย

หมายเหตุ: หากผู้ใช้ออกจากหน้าเว็บก่อนที่การดาวน์โหลดจะเสร็จสมบูรณ์ ระบบจะทิ้งข้อมูลและจะไม่สร้างไฟล์ใน Google ไดรฟ์

ใช้ปุ่มหลายปุ่มในหน้าเว็บ

คุณวางปุ่ม "บันทึกลงในไดรฟ์" หลายปุ่มในหน้าเดียวกันได้ เช่น คุณอาจมีปุ่มที่ด้านบนและด้านล่างของหน้ายาว

หากพารามิเตอร์ data-src และ data-filename เหมือนกันสำหรับปุ่มหลายปุ่ม การบันทึกจากปุ่มใดปุ่มหนึ่งจะทำให้ปุ่มที่คล้ายกันทั้งหมดแสดงข้อมูลความคืบหน้าเดียวกัน หากคลิกปุ่มต่างๆ หลายปุ่ม ระบบจะบันทึกปุ่มเหล่านั้นตามลำดับ

จัดการปุ่มและทรัพยากรในโดเมนต่างๆ

หากปุ่ม "บันทึกลงในไดรฟ์" อยู่ในหน้าเว็บที่แยกจากแหล่งข้อมูล คำขอ บันทึกไฟล์ต้องใช้การแชร์ทรัพยากรข้ามโดเมน (CORS) เพื่อเข้าถึง ทรัพยากร CORS เป็นกลไกที่อนุญาตให้เว็บแอปพลิเคชันในโดเมนหนึ่ง เข้าถึงทรัพยากรจากเซิร์ฟเวอร์ในโดเมนอื่น

ตัวอย่างเช่น หากวางปุ่ม "บันทึกลงในไดรฟ์" ไว้ในหน้าที่ http://example.com/page.html และระบุแหล่งข้อมูลเป็น data-src="https://otherserver.com/files/file.pdf" ปุ่มจะเข้าถึง PDF ไม่ได้ เว้นแต่เบราว์เซอร์จะใช้ CORS เพื่อเข้าถึงทรัพยากรได้

data-src URL สามารถแสดงจากโดเมนอื่นได้ แต่การตอบกลับจากเซิร์ฟเวอร์ 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

JavaScript ของปุ่ม "บันทึกลงในไดรฟ์" จะกำหนดฟังก์ชันการแสดงปุ่ม 2 ฟังก์ชันภายใต้เนมสเปซ gapi.savetodrive หากปิดใช้การแสดงผลอัตโนมัติ คุณต้องเรียกใช้ฟังก์ชันใดฟังก์ชันหนึ่งต่อไปนี้ โดยตั้งค่า parsetags เป็น explicit

วิธีการ	คำอธิบาย
gapi.savetodrive.render( container, parameters )	แสดงผลคอนเทนเนอร์ที่ระบุเป็นวิดเจ็ตปุ่ม "บันทึกลงในไดรฟ์" คอนเทนเนอร์ คอนเทนเนอร์ที่จะแสดงเป็นปุ่ม "บันทึกลงในไดรฟ์" ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ DOM เอง พารามิเตอร์ ออบเจ็กต์ที่มีแอตทริบิวต์แท็ก "บันทึกลงในไดรฟ์" เป็นคู่คีย์=ค่า โดยไม่มีคำนำหน้า data- เช่น {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}
gapi.savetodrive.go( opt_container )	แสดงแท็กและคลาส "บันทึกลงในไดรฟ์" ทั้งหมดในคอนเทนเนอร์ที่ระบุ ควรใช้ฟังก์ชันนี้เฉพาะในกรณีที่ตั้งค่า parsetags เป็น explicit ซึ่งคุณอาจทำเพื่อเหตุผลด้านประสิทธิภาพ opt_container คอนเทนเนอร์ที่มีแท็กปุ่ม "บันทึกลงในไดรฟ์" ที่จะแสดง ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ DOM ด้วยตัวมันเอง หากละเว้นพารามิเตอร์ opt_container ระบบจะแสดงแท็ก "บันทึกลงในไดรฟ์" ทั้งหมดในหน้าเว็บ

ตัวอย่าง JavaScript "บันทึกลงในไดรฟ์" ที่มีการโหลดอย่างชัดเจน

<!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 "บันทึกลงในไดรฟ์" ที่มีการแสดงผลอย่างชัดเจน

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

แปลปุ่ม "บันทึกลงในไดรฟ์"

หากหน้าเว็บรองรับภาษาใดภาษาหนึ่ง ให้ตั้งค่าwindow.___gcfg.lang ตัวแปรเป็นภาษานั้น หากไม่ได้ตั้งค่าไว้ ระบบจะใช้ภาษาของ Google ไดรฟ์ของผู้ใช้

ดูค่ารหัสภาษาที่ใช้ได้ที่รายการรหัสภาษาที่รองรับ

    <!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-srcURL ให้ตรวจสอบว่า มีทรัพยากรอยู่จริง และคุณไม่มีปัญหา CORS

หากไฟล์ขนาดใหญ่ถูกตัดให้เหลือ 2 MB แสดงว่าเซิร์ฟเวอร์ของคุณอาจไม่ได้ แสดง Content-Range ซึ่งอาจเป็นปัญหาเกี่ยวกับ CORS