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 (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 mỗi hướng dẫn sử dụng để người dùng có thể lưu hướng dẫn sử dụng vào phần 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ì việc tải xuống được thực hiện trong ngữ cảnh trình duyệt của người dùng, nên quá trình này cho phép người dùng xác thực hành động để lưu tệp bằng cách sử dụ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 phiên bản của nút "Lưu vào Drive", hãy thêm tập lệnh sau vào trang web của bạn:
<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 tham 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 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 phù hợp giữa trang và nguồn dữ liệu. - Không hỗ trợ URI dữ liệu và URL
file://. - Do trình duyệt có cùng chính sách nguồn gốc, nên URL này phải được phân phát từ cùng một miền với trang đặt URL đó hoặc có thể truy cập được bằng tính năng Chia sẻ tài nguyên nguồn gốc 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 bài viết Xử lý các 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ả http và https phân phát cùng một trang, hãy chỉ định tài nguyên mà không cần giao thức, chẳng hạn như
data-src="//example.com/files/file.pdf". Giao thức này sử dụng giao thức thích hợp dựa trên cách truy cập trang lưu trữ.
data-filenamelà tham số bắt buộc, có chứa tên được dùng cho tệp lưu.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ử được sử dụng phổ biến nhất là div, span hoặc button. Mỗi phần tử trong số này hiển thị hơi khác nhau 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" kết xuất lại phần tử đó.
Tập lệnh này phải được tải bằng giao thức HTTPS và có thể được đưa 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 một cách 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 tham số data-src và data-filename của nhiều nút là như nhau, thì việc lưu từ một nút sẽ khiến tất cả các nút tương tự nhau hiển thị cùng một thông tin tiến trình. Nếu người dùng nhấp vào nhiều nút, các nút đó sẽ được lưu theo tuần 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 tính năng 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 ứng dụng web ở một miền truy cập vào tài nguyên từ máy chủ ở một miền khác.
Ví dụ: nếu bạn đặt nút "Lưu vào Drive" 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 phản hồi từ máy chủ HTTP cần hỗ trợ các yêu cầu HTTP OPTION và bao gồm các tiêu đề HTTP đặc biệt sau đây:
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 máy chủ của bạn để biết cách bật CORS từ nguồn gốc phân phối nút "Save to Drive" (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ủ của mình.
API JavaScript
Nút "Lưu vào Drive" JavaScript xác định hai hàm kết xuất 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 | Nội dung mô tả |
|---|---|
gapi.savetodrive.render( |
Hiển thị vùng chứa được 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ả các lớp và thẻ "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 parsetags được đặt thành explicit. Bạn có thể thực hiện việc này vì lý do hiệu suất.
|
Ví dụ về JavaScript "Lưu vào Drive" có nội dung 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 "Lưu vào Drive" có khả năng 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 chính sách này, hệ thống sẽ sử dụng ngôn ngữ trong Google Drive của người dùng.
Để biết các giá trị mã ngôn ngữ có sẵn, 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 đề nào về CORS.
Nếu các tệp lớn bị cắt bớt xuống còn 2MB, thì có thể máy chủ của bạn không gặp vấn đề Phạm vi nội dung, có thể là do vấn đề CORS.