ปุ่ม "บันทึกไปที่ไดรฟ์" ช่วยให้ผู้ใช้สามารถบันทึกไฟล์ลงในไดรฟ์จากเว็บไซต์ของคุณ ตัวอย่างเช่น สมมติว่าเว็บไซต์ของคุณแสดงคู่มือคำแนะนำ (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 และสามารถใส่ไว้จากตำแหน่งใดก็ได้บนหน้าเว็บโดยไม่มีข้อจำกัด นอกจากนี้คุณยังโหลดสคริปต์แบบไม่พร้อมกันเพื่อประสิทธิภาพที่ดีขึ้นได้อีกด้วย
ใช้ปุ่มหลายปุ่มในหน้าเว็บเดียว
คุณสามารถวางปุ่ม "บันทึกไปยังไดรฟ์" หลายปุ่มได้ในหน้าเดียวกัน ตัวอย่างเช่น คุณอาจมีปุ่มที่ด้านบนและด้านล่างของหน้าเว็บที่ยาว
หากพารามิเตอร์ data-src
และ data-filename
เหมือนกันในหลายๆ ปุ่ม การบันทึกจากปุ่มเดียวจะทำให้ปุ่มทั้งหมดที่คล้ายกันแสดงข้อมูลความคืบหน้าเดียวกัน หากมีการคลิกปุ่มต่างๆ หลายปุ่ม
ก็จะบันทึกตามลำดับ
จัดการปุ่มและทรัพยากรในโดเมนต่างๆ
หากปุ่ม "บันทึกไปที่ไดรฟ์" อยู่ในหน้าที่แยกต่างหากจากแหล่งข้อมูล คำขอบันทึกไฟล์ต้องใช้การแชร์ทรัพยากรข้ามโดเมน (CORS) เพื่อเข้าถึงทรัพยากร CORS คือกลไกที่อนุญาตให้เว็บแอปพลิเคชันในโดเมนหนึ่งเข้าถึงทรัพยากรจากเซิร์ฟเวอร์ที่อยู่ในโดเมนอื่น
เช่น หากวางปุ่ม "บันทึกไปที่ไดรฟ์" ในหน้าที่ http://example.com/page.html
และแหล่งข้อมูลระบุเป็น data-src="https://otherserver.com/files/file.pdf"
ปุ่มนั้นจะไม่สามารถเข้าถึง PDF ได้ เว้นแต่เบราว์เซอร์จะใช้ CORS เพื่อเข้าถึงแหล่งข้อมูล
URL data-src
แสดงได้จากโดเมนอื่นแต่การตอบกลับจากเซิร์ฟเวอร์ HTTP ต้องรองรับคำขอตัวเลือก HTTP และมีส่วนหัว 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( |
แสดงผลคอนเทนเนอร์ที่ระบุเป็นวิดเจ็ตปุ่ม "บันทึกไปยังไดรฟ์"
|
gapi.savetodrive.go( |
แสดงผลแท็กและคลาส "บันทึกไปยังไดรฟ์" ทั้งหมดในคอนเทนเนอร์ที่ระบุ
ควรใช้ฟังก์ชันนี้เฉพาะเมื่อตั้งค่า parsetags เป็น explicit ซึ่งคุณอาจทำเพื่อเหตุผลด้านประสิทธิภาพ
|
ตัวอย่าง 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 เมื่อดาวน์โหลด URL ของ data-src
ให้ตรวจสอบว่ามีทรัพยากรอยู่จริงและไม่มีปัญหาของ CORS
หากไฟล์ขนาดใหญ่ถูกตัดทอนเหลือ 2 MB แสดงว่าเซิร์ฟเวอร์ของคุณไม่แสดง Content-Range ซึ่งน่าจะเป็นปัญหา CORS