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

Tải xuống tệp bằng API tải xuống

Cơ chế này cho phép bạn lấy tệp từ trang web của mình [hoặc bất kỳ vị trí nào bạn có thể xác định là URL] đến máy tính của người dùng. Phương thức chính là

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

browser.downloads.download[{url: "//example.org/image.png"}]

Bạn có thể cho phép người dùng tải xuống vị trí họ chọn bằng cách chỉ định tham số

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Ghi chú. Sử dụng URL. createObjectURL[], bạn cũng có thể tải xuống các tệp và đốm màu được xác định trong JavaScript của mình, có thể bao gồm nội dung cục bộ được truy xuất từ ​​IndexedDB

API tải xuống cũng cung cấp các tính năng để hủy, tạm dừng, tiếp tục, xóa và xóa tải xuống;

Để sử dụng API này, bạn cần có quyền API

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Thí dụ. Tài liệu tham khảo API tải xuống mới nhất. API tải xuống

Mở tệp trong tiện ích mở rộng bằng bộ chọn tệp

Nếu bạn muốn làm việc với một tệp từ máy tính của người dùng, một tùy chọn là cho phép người dùng chọn một tệp bằng trình duyệt tệp của máy tính. Tạo một trang mới hoặc chèn mã vào một trang hiện có để sử dụng loại

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Thí dụ. Hướng dẫn tưởng tượng. Sử dụng tệp từ tài liệu tham khảo API ứng dụng web. phần tử đầu vào HTML. API tệp DOM

Ghi chú. Nếu bạn muốn truy cập hoặc xử lý tất cả các tệp trong một thư mục đã chọn, bạn có thể làm như vậy bằng cách sử dụng

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Mở tệp trong tiện ích mở rộng bằng cách kéo và thả

API kéo và thả trên web cung cấp giải pháp thay thế cho việc sử dụng bộ chọn tệp. Để sử dụng phương pháp này, hãy thiết lập 'vùng thả xuống' phù hợp với giao diện người dùng của bạn, sau đó thêm người nghe cho các sự kiện

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Thí dụ. hướng dẫn tưởng tượng. Sử dụng tệp từ ứng dụng web. Tham chiếu API kéo và thả tệp. API tệp DOM

Lưu trữ dữ liệu tệp cục bộ bằng thư viện lưu trữ tệp IndexedDB

Nếu tiện ích mở rộng của bạn cần lưu tệp cục bộ, thư viện idb-file-storage sẽ cung cấp trình bao bọc dựa trên Promise đơn giản cho API IndexedDB để hỗ trợ lưu trữ và truy xuất tệp và đốm màu

Trên Firefox, thư viện này cũng cung cấp trình bao bọc API dựa trên Promise cho API

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Các tính năng chính của thư viện là

Trả về một phiên bản

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Cung cấp các phương thức để lưu và truy xuất tệp, chẳng hạn như

• list để lấy danh sách tệp được lọc tùy chọn trong cơ sở dữ liệu
• put để thêm tệp hoặc đốm màu vào cơ sở dữ liệu
• get để truy xuất một tệp hoặc đốm màu từ cơ sở dữ liệu
• remove để xóa một tệp hoặc đốm màu khỏi cơ sở dữ liệu

Ví dụ Hình ảnh do Cửa hàng sưu tầm minh họa cách sử dụng hầu hết các tính năng này. [IDBMutableFile không được bao gồm, nhưng bạn có thể tìm thấy các ví dụ trong các ví dụ về lưu trữ tệp idb cùng với một số ví dụ khác về hoạt động của thư viện]

Ví dụ về Hình ảnh đã sưu tập trong Cửa hàng cho phép người dùng thêm hình ảnh vào bộ sưu tập bằng một tùy chọn trên menu ngữ cảnh hình ảnh. Hình ảnh đã chọn được thu thập trong cửa sổ bật lên và có thể được lưu vào bộ sưu tập được đặt tên. Nút trên thanh công cụ [

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Hoạt động của thư viện có thể được hiểu bằng cách xem image-store. js trong /utils/

Tạo cửa hàng và lưu hình ảnh

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Đầu tiên,

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Nếu hình ảnh được lưu trữ có cùng tên với hình ảnh đã có trong cơ sở dữ liệu, nó sẽ bị ghi đè. Nếu bạn muốn tránh điều này, trước tiên hãy truy vấn cơ sở dữ liệu bằng cách sử dụng

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Truy xuất hình ảnh được lưu trữ để hiển thị

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Lưu ý việc sử dụng

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Xóa hình ảnh đã thu thập

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Lưu ý việc sử dụng

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Sau khi URL blob đã bị thu hồi, mọi nỗ lực tải nó sẽ dẫn đến lỗi. Ví dụ: nếu URL blob được sử dụng làm thuộc tính

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Thí dụ. Lưu trữ tài liệu tham khảo API hình ảnh được thu thập. thư viện lưu trữ tệp idb

Ghi chú. Bạn cũng có thể sử dụng API Web IndexedDB đầy đủ để lưu trữ dữ liệu từ tiện ích mở rộng của mình. Điều này có thể hữu ích khi bạn cần lưu trữ dữ liệu không được xử lý tốt bằng các cặp khóa/giá trị đơn giản do API lưu trữ DOM cung cấp

Xử lý tệp trong một ứng dụng cục bộ

Khi bạn có ứng dụng gốc hoặc muốn cung cấp các tính năng gốc bổ sung để xử lý tệp, hãy sử dụng tính năng nhắn tin gốc để chuyển tệp đến ứng dụng gốc để xử lý

Bạn có hai lựa chọn

Tại đây, bạn kích hoạt quy trình với

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Tại đây, bạn sử dụng

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Để thêm tệp hoặc blob mà bạn muốn ứng dụng gốc xử lý, hãy sử dụng

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Để sử dụng phương pháp này, tiện ích mở rộng phải yêu cầu quyền

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

async function saveCollectedBlobs[collectionName, collectedBlobs] {
 const storedImages = await getFileStorage[{name: "stored-images"}];

 for [const item of collectedBlobs] {
    await storedImages.put[`${collectionName}/${item.uuid}`, item.blob];
 }
}

Thí dụ. Nhắn tin gốc [chỉ minh họa cách nhắn tin đơn giản] Hướng dẫn. Tài liệu tham khảo API nhắn tin gốc. API thời gian chạy

JavaScript có thể truy cập các tệp cục bộ không?

JavaScript có thể ghi vào tệp không?