Tải xuống nút html với liên kết

Là người dùng trang web, một người sẽ bắt gặp các liên kết hoặc nút có nội dung "Nhấp để tải xuống" hoặc "Tải xuống" trên một trang web. Bạn đã bao giờ tự hỏi làm thế nào bạn có thể thêm một vào trang web của bạn?. Hãy đọc tiếp

Là một phần của blog này, chúng ta hãy xem cách một người có thể tạo liên kết tải xuống hoặc nút cho phép bạn tải xuống nội dung (e. g. hình ảnh, pdf, tệp, v.v. ). Bạn có biết điều gì thú vị hơn không?. Điều này có thể được thực hiện chỉ với một dòng HTML

Cách tạo liên kết hoặc nút tải xuống trong HTML

Cách đơn giản để đạt được điều này là

• tạo một thẻ neo với văn bản bạn chọn e. g "Nhấp để tải xuống"
• vào thuộc tính href, thêm đường dẫn đến URL của nội dung bạn muốn tải xuống. Trong ví dụ dưới đây, tôi đã thêm đường dẫn đến hình ảnh
• tiếp theo là phần quan trọng hơn, thêm thuộc tính tải xuống vào thẻ neo

vâng. Bạn đã tạo liên kết tải xuống của mình ngay bây giờ

Làm thế nào để tôi làm cho cái này trông giống như một cái nút?

Chỉ cần thêm một số CSS để làm cho thẻ neo trông giống như một nút

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download>Click to downloada>

Lưu tệp bằng tên tùy chỉnh

Trong ví dụ trên, khi người dùng nhấp vào tải xuống, nó sẽ lưu tệp dưới dạng "click-me. jpg", vì đó là tên tệp được chỉ định trong thuộc tính href

Còn nếu bạn muốn đặt cho nó một cái tên khác thì sao?

Chỉ cần thêm tên làm giá trị cho thuộc tính tải xuống. Ví dụ trong đoạn code dưới đây, tôi đã thêm download = test, do đó khi người dùng nhấp vào download, tệp sẽ được lưu dưới dạng test. jpg

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download="test">Click to downloada>

Giá trị nội dung/href có thể thuộc một miền khác không?

Không họ không thể. Thuộc tính tải xuống chỉ hoạt động đối với các tệp từ cùng một URL gốc (i. e tệp phải được lưu trữ trên cùng một nguồn với trang web mà bạn đang cố gắng triển khai tệp đó) hoặc tệp blob hoặc tệp URL dữ liệu

Trong ví dụ dưới đây, giá trị href là từ twitter. com trong khi trang web của tôi là blog. kritikapattalam. com. Trong trường hợp này, nút tải xuống sẽ không hoạt động

<a href="https://twitter.com/images/click-me.jpg" download="test">Click to downloada>

Chà, đó là blog này, và bây giờ bạn nên biết cách tạo bản tải xuống trên trang web của mình

Theo dõi tôi trên Twitter. LinkedIn để biết thêm các mẹo và bài đăng liên quan đến phát triển web. Phản hồi và đề xuất được chào đón

Mặc định của thẻ neo của bạn là một liên kết điều hướng, nó sẽ chuyển đến liên kết bạn đã chỉ định trong thuộc tính href của mình

Tuy nhiên, khi bạn thêm thuộc tính download, nó sẽ biến nó thành một liên kết tải xuống. Nhắc tệp của bạn được tải xuống. Tệp đã tải xuống sẽ có cùng tên với tên tệp gốc. Tuy nhiên, bạn cũng có thể đặt tên tệp tùy chỉnh bằng cách chuyển một giá trị cho thuộc tính tải xuống 🤩

<a href="/samanthaming.png" download>
  Download with original filename -> samanthaming.png
a>

<a href="/samanthaming.png" download="logo">
  Download with custom filename -> logo.png
a>

Hạn chế tải xuống

Thuộc tính download chỉ hoạt động đối với các URL có cùng nguồn gốc. Vì vậy, nếu href không cùng nguồn gốc với trang web, nó sẽ không hoạt động. Nói cách khác, bạn chỉ có thể tải xuống các tệp thuộc trang web đó. Thuộc tính này tuân theo cùng một phác thảo quy tắc trong chính sách cùng nguồn gốc

Chính sách cùng nguồn gốc là gì?

Chính sách này là một cơ chế bảo mật giúp cách ly các tài liệu độc hại tiềm ẩn và giảm các hướng tấn công có thể xảy ra. Vậy điều đó có ý nghĩa gì đối với thuộc tính download của chúng tôi? . Hãy xem một ví dụ

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download="test">Click to downloada>

<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download="test">Click to downloada>

Bạn có thể tìm hiểu thêm về chính sách này trên MDN Web Doc

Hỗ trợ trình duyệt

Tính năng này không được hỗ trợ bởi tất cả các trình duyệt (khụ khụ IE). Vì vậy, nếu bạn đang nhắm mục tiêu đến một trình duyệt cụ thể, hãy đảm bảo rằng bạn đã kiểm tra tính tương thích trước khi sử dụng thuộc tính này

Trường hợp sử dụng để chuyển tên tệp mới là gì?

Câu hỏi. Trường hợp sử dụng cho việc này là gì?

câu trả lời của tôi. Vâng, đó sẽ là lý tưởng. Nhưng đôi khi bạn có thể có một quy ước đặt tên tệp tùy chỉnh mà bạn cần tuân theo, điều này có thể không hợp lý đối với người dùng. Vì vậy, có thể chuyển vào một tên tệp tùy chỉnh có thể hữu ích 👍

• @dj_yanic. trường hợp sử dụng tốt. Tôi theo dõi số phiên bản sơ yếu lý lịch của mình, nhưng nhà tuyển dụng tải xuống từ trang web của tôi không cần biết đó là phiên bản nào

• @xây dựng. kịch bản. đăng nhập. bạn cũng có thể lập trình thay đổi tên tệp, bao gồm ngày hoặc tên người dùng chẳng hạn. Mẹo gọn gàng

Phản hồi của cộng đồng

• @vikneshwaran_jk. Tôi đã sử dụng thuộc tính tải xuống này trong trang web danh mục đầu tư cá nhân của mình để làm cho sơ yếu lý lịch của tôi có thể tải xuống (pdf). Đơn giản là mạnh mẽ👌

• chriskelly7777. Một mẹo rất hữu ích. Một vấn đề nhỏ ban đầu khiến tôi mất cảnh giác là điều này chỉ hoạt động trên các yêu cầu gốc giống nhau, không phải nguồn gốc chéo, nơi nó bị bỏ qua. Stack Overflow- chỉ để cứu bất kỳ ai khác nhổ tóc của chính họ như tôi đã làm

  Làm cách nào để tải xuống một tệp khi nhấp vào nút trong HTML?

  Phương pháp 1. Làm cách nào để kích hoạt tải xuống tệp bằng cách nhấp vào nút HTML? . Giá trị là thuộc tính do người dùng định nghĩa và có thể được đặt theo mong muốn của người dùng. Kịch bản thực thi trong thử nghiệm. utilize the tag to create an HTML button and set its value to “Download”. The value is a user-defined attribute and can be set as per the user's wish. The script executes in the test.

  Làm cách nào để thêm nút tải xuống PDF trong HTML?

  Tạo ví dụ để tải xuống tệp pdf bằng thuộc tính tải xuống thẻ . . .

  <. LOẠI TÀI LIỆU html>

  <đầu>

  Download pdf file using tag download attribute..

  .

  Làm cách nào để thêm biểu tượng tải xuống trong HTML?

  Để chèn một biểu tượng, thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nội tuyến nào . Các phần tử