Nút "Lưu vào Drive" cho phép người dùng lưu tệp vào Drive từ trang web của bạn. Ví dụ: giả sử trang web của bạn liệt kê một số hướng dẫn sử dụng (tệp PDF) mà người dùng có thể tải xuống. Bạn có thể đặt nút "Lưu vào Drive" bên cạnh từng hướng dẫn để cho phép người dùng lưu hướng dẫn vào Drive của tôi.
Khi người dùng nhấp vào nút này, tệp sẽ được tải xuống từ nguồn dữ liệu và tải lên Google Drive khi nhận được dữ liệu. Vì quá trình tải xuống được thực hiện trong bối cảnh trình duyệt của người dùng, nên quy trình này cho phép người dùng xác thực thao tác lưu tệp bằng phiên trình duyệt đã thiết lập.
Các trình duyệt được hỗ trợ
Nút "Lưu vào Drive" hỗ trợ các trình duyệt này.
Thêm nút "Lưu vào Drive" vào một trang
Để tạo một thực thể của nút "Lưu vào Drive", hãy thêm tập lệnh sau vào trang web:
<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>
Trong trường hợp:
classlà một thông số bắt buộc phải được đặt thànhg-savetodrivenếu bạn đang sử dụng thẻ HTML chuẩn.data-srclà một tham số bắt buộc chứa URL của tệp cần lưu.- URL có thể là tuyệt đối hoặc tương đối.
- URL
data-srccó thể được phân phát từ cùng một miền, miền con và giao thức với miền lưu trữ nút. Bạn phải sử dụng các giao thức khớp nhau giữa trang và nguồn dữ liệu. - URI dữ liệu và URL
file://không được hỗ trợ. - Do chính sách về cùng một nguồn gốc của trình duyệt, URL này phải được phân phát từ cùng một miền với trang chứa URL đó hoặc có thể truy cập bằng tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS). Nếu nút và tài nguyên nằm trên các miền khác nhau, hãy tham khảo phần Xử lý nút và tài nguyên trên các miền khác nhau.(#domain).
- Để phân phát tệp khi cùng một trang được phân phát bằng cả http và https, hãy chỉ định tài nguyên không có giao thức, chẳng hạn như
data-src="//example.com/files/file.pdf". Tài nguyên này sử dụng giao thức thích hợp dựa trên cách truy cập vào trang lưu trữ.
data-filenamelà tham số bắt buộc chứa tên dùng để lưu tệp.data-sitenamelà một tham số bắt buộc chứa tên của trang web cung cấp tệp.
Bạn có thể đặt các thuộc tính này trên bất kỳ phần tử HTML nào. Tuy nhiên, các phần tử thường dùng nhất là div, span hoặc button. Mỗi phần tử trong số này hiển thị một chút khác biệt trong khi trang đang tải vì trình duyệt hiển thị phần tử trước khi JavaScript "Lưu vào Drive" hiển thị lại phần tử đó.
Bạn phải tải tập lệnh này bằng giao thức HTTPS và có thể đưa tập lệnh vào từ bất kỳ điểm nào trên trang mà không bị hạn chế. Bạn cũng có thể tải tập lệnh không đồng bộ để cải thiện hiệu suất.
Sử dụng nhiều nút trên một trang
Bạn có thể đặt nhiều nút "Lưu vào Drive" trên cùng một trang. Ví dụ: bạn có thể có một nút ở đầu và ở cuối một trang dài.
Nếu các tham số data-src và data-filename giống nhau cho nhiều nút, thì việc lưu từ một nút sẽ khiến tất cả các nút tương tự hiển thị cùng một thông tin tiến trình. Nếu bạn nhấp vào nhiều nút khác nhau, các nút đó sẽ lưu theo trình tự.
Xử lý các nút và tài nguyên trên nhiều miền
Nếu nút "Lưu vào Drive" nằm trên một trang riêng biệt với nguồn dữ liệu, thì yêu cầu lưu tệp phải sử dụng Giao thức chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) để truy cập vào tài nguyên. CORS là một cơ chế cho phép một ứng dụng web tại một miền truy cập vào tài nguyên từ một máy chủ tại một miền khác.
Ví dụ: nếu nút "Save to Drive" (Lưu vào Drive) được đặt trên một trang tại http://example.com/page.html và nguồn dữ liệu được chỉ định là data-src="https://otherserver.com/files/file.pdf", thì nút này sẽ không truy cập được vào tệp PDF trừ phi trình duyệt có thể sử dụng CORS để truy cập vào tài nguyên.
URL data-src có thể được phân phát từ một miền khác, nhưng các phản hồi từ máy chủ HTTP cần hỗ trợ các yêu cầu OPTION HTTP và bao gồm các tiêu đề HTTP đặc biệt sau:
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range
Access-Control-Allow-Origin có thể có giá trị * để cho phép CORS từ bất kỳ miền nào hoặc có thể chỉ định các miền có quyền truy cập vào tài nguyên thông qua CORS, chẳng hạn như http://example.com/page.html. Nếu bạn không có máy chủ để lưu trữ nội dung, hãy cân nhắc sử dụng Google App Engine.
Để biết thêm thông tin, hãy tham khảo tài liệu về máy chủ của bạn về cách bật CORS từ nguồn gốc phân phát nút "Lưu vào Drive". Để biết thêm thông tin về cách bật máy chủ cho CORS, hãy tham khảo bài viết Tôi muốn thêm tính năng hỗ trợ CORS vào máy chủ.
API JavaScript
JavaScript của nút "Lưu vào Drive" xác định hai hàm hiển thị nút trong không gian tên gapi.savetodrive. Nếu tắt tính năng kết xuất tự động, bạn phải gọi một trong các hàm này bằng cách đặt parsetags thành explicit.
| Phương thức | Mô tả |
|---|---|
gapi.savetodrive.render( |
Kết xuất vùng chứa đã chỉ định dưới dạng tiện ích nút "Lưu vào Drive".
|
gapi.savetodrive.go( |
Hiển thị tất cả thẻ và lớp "Lưu vào Drive" trong vùng chứa được chỉ định.
Bạn chỉ nên sử dụng hàm này nếu đặt parsetags thành explicit. Bạn có thể làm như vậy vì lý do hiệu suất.
|
Ví dụ về JavaScript "Lưu vào Drive" có tải rõ ràng
<!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>
Ví dụ về JavaScript "Save to Drive" (Lưu vào Drive) có kết xuất rõ ràng
<!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>
Bản địa hoá nút "Lưu vào Drive"
Nếu trang web của bạn hỗ trợ một ngôn ngữ cụ thể, hãy đặt biến window.___gcfg.lang thành ngôn ngữ đó. Nếu bạn không đặt, hệ thống sẽ sử dụng ngôn ngữ của người dùng trên Google Drive.
Để biết các giá trị mã ngôn ngữ hiện có, hãy xem danh sách mã ngôn ngữ được hỗ trợ.
<!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>
Khắc phục sự cố
Nếu bạn gặp lỗi XHR khi tải URL data-src xuống, hãy xác minh rằng tài nguyên đó thực sự tồn tại và bạn không gặp vấn đề về CORS.
Nếu các tệp lớn bị cắt bớt còn 2 MB, thì có thể máy chủ của bạn không hiển thị Content-Range, có thể là vấn đề CORS.