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 (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 sổ tay để cho phép người dùng lưu sổ tay 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 hành động lưu tệp bằng phiên trình duyệt đã thiết lập của họ.
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 thông số bắt buộc và phải được đặt thànhg-savetodrivenếu bạn đang sử dụng thẻ HTML tiêu 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à URL 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 nơi nút được lưu trữ. Bạn phải sử dụng các giao thức khớp 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 cùng 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 mà URL được đặt trên đó hoặc có thể truy cập bằng cách sử dụng tính năng Chia sẻ tài nguyê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 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ùng một trang được phân phát bằng cả http và https, hãy chỉ định tài nguyên mà 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ẽ 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à một tham số bắt buộc chứa tên 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ử thường dùng nhất là div, span hoặc button. Mỗi phần tử này hiển thị hơi khác một chú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ử.
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 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à một nút ở 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 người dùng nhấp vào nhiều nút khác nhau, các nút đó sẽ lưu 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" của bạn 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 ứng dụng web ở một miền truy cập vào tài nguyên từ một máy chủ ở một miền khác.
Ví dụ: nếu nút "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 HTTP OPTION 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 để biết cách bật CORS từ nguồn phân phát nút "Lưu vào Drive". Để biết thêm thông tin về cách bật CORS cho máy chủ, 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
JavaScript của nút "Lưu vào Drive" xác định 2 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 | Mô tả |
|---|---|
gapi.savetodrive.render( |
Kết xuất vùng chứa đã chỉ định dưới dạng một tiện ích nút "Lưu vào Drive".
|
gapi.savetodrive.go( |
Hiển thị tất cả các thẻ và lớp "Lưu vào Drive" trong vùng chứa được chỉ định.
Bạn chỉ nên dùng hàm này nếu đặt parsetags thành explicit, có thể bạn sẽ làm như vậy vì lý do hiệu suất.
|
Ví dụ về JavaScript "Lưu vào Drive" với chế độ 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" với tính năng hiển thị 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>
Nội đị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 Google Drive mà người dùng đã chọn.
Để 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 thành 2 MB, thì có khả năng máy chủ của bạn không hiển thị Content-Range, có thể là vấn đề về CORS.