Thêm nút "Lưu vào Drive"

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 mỗi sách hướng dẫn để người dùng có thể lưu sách 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 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 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 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:

class là một tham số bắt buộc phải được đặt thành g-savetodrive nếu bạn đang sử dụng thẻ HTML tiêu chuẩn.
data-src là 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-src có thể được phân phát từ cùng một miền, miền phụ và giao thức như 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.
- 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 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 bài viết 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 mà không có giao thức 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-filename là một tham số bắt buộc chứa tên dùng cho tệp lưu.
data-sitename là 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 đối với 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ý nút và tài nguyên trên các miền khác nhau

Nếu nút "Lưu vào Drive" nằm trên một trang riêng biệt so với nguồn dữ liệu, thì yêu cầu lưu tệp phải sử dụ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ộ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 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 hiển thị 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ả

Phương thức	Mô tả
`gapi.savetodrive.render( container, parameters )`	Hiển thị vùng chứa đã chỉ định dưới dạng tiện ích nút "Lưu vào Drive". vùng chứa Vùng chứa để hiển thị dưới dạng nút "Lưu vào Drive". Chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM. tham số Một đối tượng chứa các thuộc tính thẻ "Lưu vào Drive" dưới dạng các cặp khoá=giá trị, không có tiền tố `data-` Ví dụ: `{"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}`.
`gapi.savetodrive.go( opt_container )`	Hiển thị tất cả các thẻ và lớp "Lưu vào Drive" trong vùng chứa đã chỉ định. Bạn chỉ nên sử dụng hàm này nếu `parsetags` được đặt thành `explicit`, điều mà bạn có thể thực hiện vì lý do hiệu suất. opt_container Vùng chứa chứa các thẻ nút "Lưu vào Drive" để hiển thị. Chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM chính nó. Nếu bạn bỏ qua tham số `opt_container`, tất cả các thẻ "Lưu vào Drive" trên trang sẽ được hiển thị.

gapi.savetodrive.render(

container,
 parameters
)

Hiển thị vùng chứa đã chỉ định dưới dạng tiện ích nút "Lưu vào Drive".

vùng chứa: Vùng chứa để hiển thị dưới dạng nút "Lưu vào Drive". Chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM.
tham số: Một đối tượng chứa các thuộc tính thẻ "Lưu vào Drive" dưới dạng các cặp khoá=giá trị, không có tiền tố data- Ví dụ: {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.

gapi.savetodrive.go(
 opt_container
)

Hiển thị tất cả các thẻ và lớp "Lưu vào Drive" trong vùng chứa đã chỉ định. Bạn chỉ nên sử dụng hàm này nếu parsetags được đặt thành explicit, điều mà bạn có thể thực hiện vì lý do hiệu suất.

opt_container: Vùng chứa chứa các thẻ nút "Lưu vào Drive" để hiển thị. Chỉ định mã nhận dạng của vùng chứa (chuỗi) hoặc chính phần tử DOM chính nó. Nếu bạn bỏ qua tham số opt_container, tất cả các thẻ "Lưu vào Drive" trên trang sẽ được hiển thị.

Ví dụ về JavaScript "Lưu vào Drive" với 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 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 không được đặt, ngôn ngữ Google Drive của người dùng sẽ được sử dụng.

Để 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.