Cách tạo nút lưu tệp trong html

Danh mục sản phẩm đôi khi được gọi là nguồn cấp dữ liệu sản phẩm, là danh sách các sản phẩm bạn muốn quảng cáo trên Facebook. Mỗi sản phẩm trong danh sách có các thuộc tính cụ thể có thể được sử dụng để tạo quảng cáo, ID sản phẩm, tên, mô tả, URL trang đích, URL hình ảnh, tình trạng còn hàng, v.v.

Cách tạo danh mục sản phẩm Quảng cáo sản phẩm động trên Facebook

2. ID API Facebook

Chuyển đến tab cài đặt của bảng điều khiển ứng dụng, thêm nền tảng "Trang web" và cung cấp tên miền trang web của bạn

3. Đang tải SDK JavaScript

Tải SDK JavaScript bằng ID ứng dụng của bạn như minh họa trong ví dụ bên dưới. Thay thế {your-app-id} bằng ID ứng dụng của bạn

4. Nhận URI sản phẩm

Qua Trình quản lý kinh doanh

Có 2 thông tin bạn cần để sử dụng nút Lưu sản phẩm. ID danh mục sản phẩm và ID mặt hàng từ nguồn cấp dữ liệu sản phẩm của bạn

  1. Đăng nhập vào doanh nghiệp của bạn trên trình quản lý doanh nghiệp
  2. Chuyển đến "Cài đặt doanh nghiệp"> "Danh mục sản phẩm"
  3. Nhấp vào danh mục sản phẩm bạn muốn sử dụng cho plugin
  4. Dưới tiêu đề tên của Danh mục sản phẩm, hãy ghi lại ID Danh mục sản phẩm. Trong ví dụ của chúng tôi, đó là 768856339915012
  5. Thông tin cần thiết khác là ID mặt hàng đã được tải lên trong nguồn cấp sản phẩm của bạn. Để xem các ví dụ từ nguồn cấp dữ liệu sản phẩm của bạn, hãy nhấp vào ID danh mục sản phẩm
  6. Trên trang tiếp theo, nhấp vào Nguồn cấp dữ liệu sản phẩm ở trên cùng
  7. Nhấp vào nguồn cấp dữ liệu có chứa các mục bạn muốn sử dụng
  8. Trên trang tiếp theo, bạn sẽ thấy một mẫu các mặt hàng từ nguồn cấp dữ liệu của mình. Để plugin xác định sản phẩm của bạn, chúng tôi sẽ cần ID mặt hàng được liệt kê trong nguồn cấp dữ liệu của bạn cho từng sản phẩm
  9. URI cho plugin tuân theo mẫu của product:///{retailer_id}. Vì vậy, nếu chúng tôi muốn tạo một URI cho sản phẩm có tên Product #45 trong ví dụ trên thì nó sẽ như thế này. product://768856339915012/45 (trong đó ID danh mục của sản phẩm đến từ bước #5)

Thông qua API đồ thị

Bạn có thể lấy URI của sản phẩm qua API Đồ thị. Khi tải một hoặc nhiều mặt hàng sản phẩm, hãy tạo định dạng URL sau đồng thời thay thế

product:///
0 bằng ID danh mục của bạn và
product:///
0 bằng ID nhà bán lẻ sản phẩm của bạn

product:///

Tìm hiểu thêm trong tài liệu mục sản phẩm

5. URI sản phẩm

Trong mã nút Lưu, hãy sử dụng URI sản phẩm cho

product:///
0. Ví dụ: đối với URI sản phẩm
product:///
1, mã của bạn sẽ như thế này

Nếu chúng tôi muốn tạo một nút trong tài liệu Html sẽ được hiển thị trên trang web trong trình duyệt, chúng tôi phải làm theo các bước được đưa ra dưới đây. Sử dụng các bước này, chúng ta có thể dễ dàng tạo nút để gọi hàm JavaScript

Bước 1. Đầu tiên, chúng ta phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng ta muốn tạo nút

Bước 2. Bây giờ, di chuyển con trỏ đến nơi chúng tôi muốn hiển thị nút trên trang web. Và sau đó, nhập thẻ Html vào thời điểm đó

Bước 3. Bây giờ, chúng ta phải thêm thuộc tính của thẻ nút có tên là "type". Vì vậy, hãy nhập thuộc tính 'type' trong phần đầu

nhãn. Và, sau đó chúng ta phải đưa ra giá trị của thuộc tính. Vì vậy, chúng ta phải nhập giá trị nút trong thuộc tính loại như được mô tả trong khối sau

Bước 4. Bây giờ, chúng ta phải sử dụng thuộc tính khác của

thẻ có tên là "onclick". Vì vậy, hãy nhập thuộc tính onclick ngay sau thuộc tính type trong thẻ bắt đầu. Và, sau đó chúng ta phải nhập thông báo sẽ được hiển thị khi người dùng nhấp vào nút. Vì vậy, hãy nhập thông báo dưới dạng giá trị trong thuộc tính onclick

Bước 5. Và, cuối cùng, chúng ta phải lưu mã Html và sau đó chạy nó. Sau khi thực hiện chúng ta sẽ thấy nút trên một trang web nếu làm tuần tự các bước trên

Để kích hoạt tải xuống tệp khi nhấp vào nút, chúng tôi sẽ sử dụng chức năng tùy chỉnh hoặc thuộc tính tải xuống HTML 5

Cách tiếp cận 1. Sử dụng thuộc tính Tải xuống

Thuộc tính tải xuống chỉ cần sử dụng thẻ neo để chuẩn bị vị trí của tệp cần tải xuống. Tên của tệp có thể được đặt bằng tên giá trị thuộc tính, nếu không được cung cấp thì tên tệp gốc sẽ được sử dụng

cú pháp

Thí dụ.  

html




product:///
2

product:///
3____14
product:///
5

product:///
6
product:///
3
product:///
8
product:///
5

product:///
0
product:///
3
product:///
21
product:///
5

product:///
23
product:///
24

product:///
23
product:///
26

product:///
23
product:///
28

product:///
0____130
product:///
21
product:///
5

product:///
0____13
product:///
35
product:///
36

product:///
23
product:///
38

product:///
0
product:///
3
product:///
35
product:///
5

product:///
23
product:///
44

product:///
45
product:///
46

product:///
23
product:///
48

product:///
45
product:///
50

product:///
45
product:///
52

product:///
45
product:///
54

product:///
45
product:///
56

product:///
45
product:///
58

product:///
23
product:///
3
product:///
61
product:///
62
product:///
63
product:///
64
product:///
65
product:///
63
product:///
67
product:///
5

product:///
23
product:///
3
product:///
31
product:///
32
product:///
63
product:///
34
product:///
35
product:///
31
product:///
5

product:///
23
product:///
30
product:///
61
product:///
5

product:///
6
product:///
30
product:///
8
product:///
5

product:///
30
product:///
4
product:///
5

đầu ra.  

Cách tạo nút lưu tệp trong html

Cách tiếp cận 2. Sử dụng chức năng javascript tùy chỉnh

  • lần đầu tiên tạo một vùng văn bản nơi tất cả các kiểu nhập văn bản sẽ được phát hành
  • tạo một thẻ neo bằng thuộc tính createElement và sau đó gán cho nó thuộc tính download và href
  • encodeURIComponent sẽ mã hóa mọi thứ với ý nghĩa đặc biệt, vì vậy bạn sử dụng nó cho các thành phần của URI.
    Ví dụ: nếu chúng tôi có văn bản như “Xin chào. Geek?”, có các ký tự đặc biệt trong này, vì vậy encodeURIComponent sẽ mã hóa chúng và nối thêm để sử dụng tiếp.
  • dữ liệu. văn bản/đồng bằng; . Phương thức click() mô phỏng thao tác nhấp chuột vào một phần tử
  • Sau đó, chúng tôi chỉ cần gọi chức năng tải xuống của mình bằng văn bản từ vùng văn bản và tên tệp của chúng tôi là “GFG. txt” làm tham số trên nút nhập liệu có id ‘btn’

Thí dụ.  

html




product:///
2

product:///
3____14
product:///
5

product:///
6
product:///
3
product:///
8
product:///
5

product:///
0
product:///
3
product:///
21
product:///
5

product:///
23
product:///
24

product:///
23
product:///
26

product:///
23
product:///
28

product:///
0____130
product:///
21
product:///
5

product:///
0
product:///
3
product:///
35
product:///
5

________ 1205 ________ 1206

product:///
205
product:///
38

product:///
0
product:///
3
product:///
35
product:///
5

product:///
23
product:///
3
product:///
215
product:///
216
product:///
63
product:///
218
product:///
5

product:///
220
product:///
221

product:///
23
product:///
30
product:///
215
product:///
5

product:///
23
product:///
3
product:///
228
product:///
229

product:///
23
product:///
3
product:///
232
product:///
32
product:///
63
product:///
34
product:///
216
product:///
63
product:///
238

product:///
239
product:///
240
product:///
63
product:///
242
product:///
229

product:///
23
product:///
3
product:///
246
product:///
5

product:///
45
product:///
249

product:///
45

product:///
239____1252

product:///
239
product:///
254

product:///
239
product:///
256

product:///
239____1258

product:///
239
product:///
260

product:///
239
product:///
262

product:///
45

product:///
239
product:///
265

product:///
239
product:///
267
product:///
61
product:///
62
product:///
63
product:///
271
product:///
65
product:///
63
product:///
274
product:///
5

product:///
45

product:///
239
product:///
278

product:///
45

product:///
239
product:///
281

product:///
239
product:///
283

product:///
45

product:///
239
product:///
286

product:///
45
product:///
28

product:///
45

product:///
45
product:///
291

product:///
45
product:///
293

product:///
45
product:///
295

product:///
239
product:///
297

product:///
239
product:///
299

product:///
239
product:///
301

product:///
239
product:///
303

product:///
45

product:///
239
product:///
306

product:///
45
product:///
308

product:///
23
product:///
30
product:///
246
product:///
5

product:///
6
product:///
30
product:///
8
product:///
5

product:///
30
product:///
4
product:///
5

đầu ra.  

Cách tạo nút lưu tệp trong html

Cách tiếp cận 3. Sử dụng chức năng javascript tùy chỉnh với Thư viện Axios

Trong ví dụ này, chúng tôi sẽ tải xuống hình ảnh và tệp bằng Axios. Điều này yêu cầu một chút kiến ​​thức trung cấp về JavaScript để hoạt động và trong ví dụ này, thư viện Axios sẽ được sử dụng

html




product:///
2

product:///
2

product:///
3____14
product:///
5

product:///
6
product:///
3
product:///
327____15

product:///
0____13
product:///
331
product:///
332
product:///
331
product:///
5

product:///
0
product:///
3
product:///
21
product:///
5

product:///
23
product:///
340

product:///
23____1342

product:///
23____1344

product:///
23
product:///
28

product:///
0____130
product:///
21
product:///
5

product:///
6
product:///
30
product:///
327
product:///
5

product:///
6
product:///
3
product:///
8
product:///
5

product:///
0______13
product:///
35
product:///
216
product:///
63
product:///
364
product:///
5

product:///
0______13
product:///
368
product:///
21
product:///
63
product:///
371
product:///
5

product:///
23
product:///
374

product:///
0
product:///
30
product:///
368
product:///
5

product:///
0
product:///
30
product:///
35
product:///
5

product:///
0______13
product:///
31
product:///
386
product:///
63
product:///
388
product:///
5

product:///
205
product:///
391

product:///
0
product:///
30
product:///
31
product:///
5

product:///
0______13
product:///
35
product:///
399
product:///
63
product:///
401____15

product:///
23
product:///
404

product:///
23
product:///
406

product:///
0
product:///
30
product:///
35
product:///
5

product:///
6
product:///
30
product:///
8
product:///
5

product:///
6
product:///
3
product:///
246
product:///
418
product:///
63

product:///
420
product:///
5

product:///
6
product:///
30
product:///
246
product:///
5

product:///
6
product:///
3
product:///
246
product:///
5

product:///
0____1431

product:///
205
product:///
433

product:///
434
product:///
435

product:///
434
product:///
437

product:///
434
product:///
439

product:///
0____1441

product:///
0____1443

product:///
220
product:///
445

product:///
220
product:///
447

________ 1448 ________ 1449

product:///
448
product:///
451

product:///
448
product:///
453

product:///
448
product:///
455

product:///
448
product:///
457

product:///
0____1441

product:///
0
product:///
28

product:///
0

product:///
6
product:///
30
product:///
246
product:///
5

product:///
30
product:///
4
product:///
5

product:///
30
product:///
4
product:///
5

đầu ra.  

Cách tạo nút lưu tệp trong html

JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này

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

Để kích hoạt tải xuống tệp khi nhấp vào nút, chúng tôi sẽ sử dụng chức năng tùy chỉnh hoặc thuộc tính tải xuống HTML 5 . Thuộc tính tải xuống chỉ cần sử dụng thẻ neo để chuẩn bị vị trí của tệp cần tải xuống.

Mã HTML cho Lưu là gì?

Nhấn CTRL+S. Nhấp chuột phải vào tài liệu HTML, nhấp vào Tệp > Lưu .

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

Làm cách nào để lưu nút trong JavaScript?

In/Lưu phím tắt. cmd + p (Mac) / ctrl + p (Windows) .