Bạn có thể lưu JavaScript dưới dạng HTML không?

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất, chủ yếu là vì nó xử lý giao diện người dùng của các trang web trong khi chạy bên trong trình duyệt. Với những tiến bộ trong tiêu chuẩn web, chúng tôi đã sử dụng nó để hoàn thành ngày càng nhiều tác vụ mà trước đây rất khó hoặc không thể thực hiện chỉ với JavaScript

Trong hướng dẫn này, bạn sẽ học cách tạo và lưu tệp bằng JavaScript. Chúng tôi sẽ thảo luận về ba kỹ thuật khác nhau mà bạn có thể sử dụng để làm như vậy

Sử dụng URL dữ liệu để lưu tệp

Cách dễ nhất để lưu tệp là sử dụng URL dữ liệu bao gồm tất cả thông tin liên quan. Các URL dữ liệu này là các URL đặc biệt có tiền tố là lược đồ

data:[][;base64],

19. Chúng rất lý tưởng để nhúng các tệp nhỏ vào tài liệu HTML của bạn. Các URL này theo cú pháp sau

1

data:[][;base64],

Mã thông báo

data:[][;base64],

20 thực sự là một loại MIME chỉ định bản chất và định dạng của tài liệu hoặc tệp. Giá trị mặc định của nó là

data:[][;base64],

21. Mã thông báo

data:[][;base64],

22 là tùy chọn và chỉ cần thiết khi bạn muốn lưu trữ dữ liệu nhị phân ở dạng văn bản. Chúng tôi chỉ định dữ liệu thực tế của mình sau tất cả các mã thông báo này

Chúng tôi có thể sử dụng thuộc tính

data:[][;base64],

23 để chỉ định tên của tệp mà chúng tôi muốn đặt tất cả nội dung của mình sau khi tải xuống. Dưới đây là một ví dụ về việc sử dụng tất cả các thuộc tính này cùng nhau

1

Download Text File with Name

JavaScript có thể rất hữu ích khi bạn muốn làm cho mọi thứ trở nên năng động. Đây là một ví dụ

1

1

0

1

1

1

2

1

3

1

4

data:[][;base64],

0

data:[][;base64],

1

data:[][;base64],

2

data:[][;base64],

3

data:[][;base64],

4

data:[][;base64],

5

data:[][;base64],

6

data:[][;base64],

7

data:[][;base64],

8

data:[][;base64],

9

Chúng tôi bắt đầu bằng cách chọn liên kết của mình bằng phương pháp

data:[][;base64],

24 và sau đó tạo một loạt các biến để lưu trữ tên tệp và nội dung của nó. Sử dụng mẫu chữ cho phép chúng tôi làm việc với các chuỗi nhiều dòng một cách dễ dàng

Chúng tôi tạo URL dữ liệu của mình bằng cách nối siêu dữ liệu với nội dung thực tế được mã hóa bằng hàm

data:[][;base64],

25. Bản trình diễn CodePen sau đây cho thấy phương pháp lưu tệp văn bản này bằng JavaScript

Sử dụng Blobs để tạo và lưu tệp

Các đốm màu là các đối tượng giống như tệp trong JavaScript chứa dữ liệu thô. Dữ liệu thô này có thể được đọc dưới dạng văn bản hoặc dưới dạng dữ liệu nhị phân. Trong hướng dẫn này, chúng tôi sẽ sử dụng các đốm màu để tạo và lưu tệp trong JavaScript

Chúng ta có thể tạo các đốm màu của riêng mình bằng cách sử dụng hàm tạo

data:[][;base64],

26, hàm này chấp nhận một mảng các đối tượng cụ thể được đặt bên trong đốm màu. Bạn có thể chuyển loại dữ liệu MIME dưới dạng cặp khóa-giá trị trong một đối tượng là tham số thứ hai của hàm tạo

data:[][;base64],

26. Nó là một chuỗi rỗng theo mặc định

Chúng ta có thể sửa đổi ví dụ cuối cùng trong phần trước để sử dụng các đốm màu với mã JavaScript sau

1

1

1

1

1_______12

1

3

1

4

data:[][;base64],

0

data:[][;base64],

1

data:[][;base64],

2

data:[][;base64],

3

data:[][;base64],

4

data:[][;base64],

5

data:[][;base64],

6

Download Text File with Name

3

data:[][;base64],

8

Download Text File with Name

5

Download Text File with Name

6

Download Text File with Name

7

data:[][;base64],

9

Chúng tôi tạo

data:[][;base64],

28 của mình bằng cách gọi hàm tạo

data:[][;base64],

26 và chuyển biến

data:[][;base64],

30 của chúng tôi cho nó dưới dạng phần tử mảng. Sau đó, chúng tôi chỉ cần đặt giá trị của các thuộc tính

data:[][;base64],

31 và

data:[][;base64],

23. URL trong trường hợp này được tạo bằng cách gọi hàm

data:[][;base64],

33, hàm này trả về một chuỗi chứa URL của đối tượng mà chúng ta đã truyền cho nó

Hãy tiến thêm một bước và tạo một đốm màu trong đó văn bản được lấy tự động từ phần tử

data:[][;base64],

34 trên trang web. Bạn sẽ có thể viết bất cứ thứ gì bạn thích vào

data:[][;base64],

34 và sau đó nhấp vào nút Lưu tệp để lưu thành tệp

1

1

0_______11

1

3

1

2

1

4

1

5

data:[][;base64],

1

1

7

data:[][;base64],

3

1

9

data:[][;base64],

5

1

01

data:[][;base64],

6

1

03

data:[][;base64],

8

Download Text File with Name

5

1

06

Download Text File with Name

7

1

08

1

09

1

10

1

11

1

7

1

13

1

14

1

15

1

16

1

17

Chúng tôi bắt đầu bằng cách tham chiếu đến nút của chúng tôi và sau đó lắng nghe các sự kiện nhấp chuột của nó. Sau khi nhấp vào nút, chúng tôi nhận được giá trị của phần tử

data:[][;base64],

34 và chuyển đổi nó thành blob. Sau đó, chúng tôi tạo một URL tham chiếu blob của chúng tôi và gán nó cho thuộc tính

data:[][;base64],

31 của thẻ neo mà chúng tôi đã tạo

Bạn có thể dùng thử trong bản demo CodePen sau. Như một bài tập, hãy thử sửa đổi mã để nó lưu tệp với tên do người dùng nhập thay vì tên tĩnh

Cách lưu tệp trong một thư mục cụ thể bằng JavaScript

Hãy bắt đầu bằng cách loại bỏ câu hỏi này trước. Nói tóm lại, bạn không thể tự ý chọn thư mục lưu tệp trong JavaScript. Chỉ người dùng mới có quyền kiểm soát vị trí lưu tệp

Lý do nhà phát triển web không được phép kiểm soát hoàn toàn vị trí lưu tệp bởi trình duyệt liên quan đến bảo mật. Internet sẽ kém an toàn hơn rất nhiều nếu mọi trang web đều có quyền truy cập vào hệ thống tệp trên thiết bị của bạn. Họ có thể đơn giản đưa mã độc vào hệ thống của bạn hoặc xem thông tin cá nhân

Trước đó, không thể lưu tệp ở bất kỳ đâu ngoại trừ thư mục tải xuống mặc định, được quyết định bởi cài đặt của trình duyệt chứ không phải các trang web riêng lẻ. Tuy nhiên, API truy cập hệ thống tệp cho phép nhà phát triển đề xuất nơi có thể lưu tệp sau khi họ được người dùng cấp quyền truy cập. Hãy nhớ rằng hỗ trợ trình duyệt rộng hơn hiện đang thiếu API và các trình duyệt hỗ trợ nó chỉ làm như vậy một phần

Hãy sửa đổi ví dụ cuối cùng của chúng tôi từ phần trước để tạo và lưu tệp trong JavaScript bằng API truy cập hệ thống tệp

1

1

0

1

1

1

3

1

2

1

4

1

24

data:[][;base64],

1

1

7

data:[][;base64],

3

1

01

data:[][;base64],

5

1

03

data:[][;base64],

6

1

7

data:[][;base64],

8

1

34

Download Text File with Name

5

1

36

Download Text File with Name

7

1

38

1

09

1

40

1

11

1

42

1

13

1

44

1

15

1

46

1

17

1

48

1

49

data:[][;base64],

00

data:[][;base64],

01

data:[][;base64],

02

data:[][;base64],

03

data:[][;base64],

04

data:[][;base64],

05

data:[][;base64],

06

data:[][;base64],

07

data:[][;base64],

08

data:[][;base64],

09

data:[][;base64],

10

data:[][;base64],

11

data:[][;base64],

12

data:[][;base64],

13

data:[][;base64],

14

data:[][;base64],

15

data:[][;base64],

16

data:[][;base64],

17

1

16

Như thường lệ, chúng tôi bắt đầu bằng cách tạo một đốm màu của

data:[][;base64],

30 bên trong phần tử

data:[][;base64],

34. Chúng tôi tạo một đối tượng chứa các tùy chọn khác nhau cho trình chọn tệp của chúng tôi hiển thị khi chúng tôi gọi phương thức

data:[][;base64],

40. Chúng tôi có thể đề xuất một tên để lưu tệp tại đây và cũng có thể chuyển một loạt các loại tệp được phép lưu. Phương thức này trả về một

data:[][;base64],

41 mà chúng ta có thể gọi phương thức

data:[][;base64],

42

Phương thức

data:[][;base64],

42 tạo một luồng có thể ghi và chúng tôi ghi đốm màu mà chúng tôi đã tạo trước đó vào luồng này. Cuối cùng, chúng tôi đóng luồng có thể ghi của mình. Tại thời điểm này, nội dung từ luồng được lưu vào tệp

Thử viết gì đó vào

data:[][;base64],

34 của CodePen sau, rồi nhấp vào nút Lưu tệp. Bản demo sẽ không hoạt động trong Firefox, vì vậy bạn nên thử sử dụng Chrome hoặc Edge

Suy nghĩ cuối cùng

Trong hướng dẫn này, chúng ta đã học được ba kỹ thuật tạo và lưu tệp khác nhau trong JavaScript. Hai kỹ thuật đầu tiên yêu cầu chúng tôi tạo các thẻ neo và gán giá trị cho các thuộc tính

data:[][;base64],

31 và

data:[][;base64],

23 của chúng. Kỹ thuật cuối cùng liên quan đến việc sử dụng API truy cập hệ thống tệp và cho phép chúng tôi kiểm soát tốt hơn các khía cạnh khác nhau của quy trình như thay đổi vị trí tải xuống mặc định với sự cho phép của người dùng. Tuy nhiên, hiện tại nó không có hỗ trợ trình duyệt đáng kể để sử dụng trong các dự án thực tế