Tạo tập tin từ url javascript

Trong trình duyệt, có thêm các đối tượng cấp cao hơn, được mô tả trong API tệp, cụ thể là

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 bao gồm một chuỗi tùy chọn
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
6 [thường là kiểu MIME], cộng với
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
7 – một chuỗi gồm các đối tượng, chuỗi và
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
9 khác của
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4

Cú pháp hàm tạo là

new Blob[blobParts, options];

  • // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    7 là một mảng gồm các giá trị
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    4/
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    9/
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    03
  • đối tượng tùy chọn
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    04
    • Loại
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      6 –
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      4, thường là loại MIME, e. g.
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      07,
    • // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      08 – có chuyển đổi cuối dòng để làm cho
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      4 tương ứng với các dòng mới của hệ điều hành hiện tại hay không [
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      70 hoặc
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      71]. Theo mặc định là
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      72 [không làm gì], nhưng cũng có thể là
      // create Blob from a string
      let blob = new Blob[["…"], {type: 'text/html'}];
      // please note: the first argument must be an array [...]
      73 [biến đổi]

Ví dụ

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
0

Chúng tôi có thể trích xuất các lát cắt

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 với

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
7

  • // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    75 – byte bắt đầu, theo mặc định là 0
  • // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    76 – byte cuối cùng [độc quyền, theo mặc định cho đến hết]
  • // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    77 –
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    6 của đốm màu mới, theo mặc định giống như nguồn

Các đối số tương tự như

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
79, số âm cũng được phép

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 đối tượng là bất biến

Chúng tôi không thể thay đổi dữ liệu trực tiếp trong một

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4, nhưng chúng tôi có thể cắt các phần của một
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4, tạo các đối tượng
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 mới từ chúng, trộn chúng vào một
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 mới, v.v.

Hành vi này tương tự như chuỗi JavaScript. chúng ta không thể thay đổi một ký tự trong một chuỗi, nhưng chúng ta có thể tạo một chuỗi mới đã sửa

Blob dưới dạng URL

Có thể dễ dàng sử dụng Blob làm URL cho

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
55,
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
56 hoặc các thẻ khác để hiển thị nội dung của nó

Nhờ có

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
6, chúng tôi cũng có thể tải xuống/tải lên các đối tượng
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 và
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
6 tự nhiên trở thành
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
00 trong các yêu cầu mạng

Hãy bắt đầu với một ví dụ đơn giản. Bằng cách nhấp vào liên kết, bạn tải xuống

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 được tạo động với nội dung
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
02 dưới dạng tệp

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
5

Chúng tôi cũng có thể tạo một liên kết động bằng JavaScript và mô phỏng một lần nhấp bằng

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
03, sau đó quá trình tải xuống sẽ tự động bắt đầu

Đây là mã tương tự khiến người dùng tải xuống

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 được tạo động, không có bất kỳ HTML nào

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
0

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
05 lấy một
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 và tạo một URL duy nhất cho nó, ở dạng
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
07

Đó là giá trị của

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
08 trông như thế nào

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
1

Đối với mỗi URL được tạo bởi

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
05, trình duyệt lưu trữ bản đồ URL →
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 bên trong. Vì vậy, các URL như vậy ngắn, nhưng cho phép truy cập vào
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4

Một URL được tạo [và do đó liên kết với nó] chỉ hợp lệ trong tài liệu hiện tại, khi nó đang mở. Và nó cho phép tham chiếu đến

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 trong
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
56,
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
55, về cơ bản là bất kỳ đối tượng nào khác mong đợi một URL

Có một tác dụng phụ mặc dù. Trong khi có một ánh xạ cho một

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4, thì bản thân
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 nằm trong bộ nhớ. Trình duyệt không thể giải phóng nó

Ánh xạ sẽ tự động bị xóa khi tải xuống tài liệu, vì vậy các đối tượng

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 được giải phóng sau đó. Nhưng nếu một ứng dụng tồn tại lâu dài, thì điều đó sẽ không sớm xảy ra

Vì vậy, nếu chúng tôi tạo một URL, thì

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 đó sẽ bị treo trong bộ nhớ, ngay cả khi không cần thiết nữa

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
19 xóa tham chiếu khỏi ánh xạ bên trong, do đó cho phép xóa
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 [nếu không có tham chiếu nào khác] và giải phóng bộ nhớ

Trong ví dụ cuối cùng, chúng tôi dự định chỉ sử dụng

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 một lần để tải xuống ngay lập tức, vì vậy chúng tôi gọi ngay cho
new Blob[blobParts, options];
52

Trong ví dụ trước với liên kết HTML có thể nhấp, chúng tôi không gọi

new Blob[blobParts, options];
52, vì điều đó sẽ làm cho url
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 không hợp lệ. Sau khi thu hồi, do ánh xạ bị xóa nên URL không hoạt động nữa

Blob đến base64

Một giải pháp thay thế cho

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
05 là chuyển đổi
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 thành chuỗi được mã hóa base64

Mã hóa đó biểu thị dữ liệu nhị phân dưới dạng một chuỗi ký tự cực kỳ an toàn “có thể đọc được” với mã ASCII từ 0 đến 64. Và điều quan trọng hơn – chúng ta có thể sử dụng mã hóa này trong “data-urls”

Một url dữ liệu có dạng

new Blob[blobParts, options];
57. Chúng tôi có thể sử dụng các url như vậy ở mọi nơi, ngang bằng với các url “thông thường”

Ví dụ, đây là một mặt cười

new Blob[blobParts, options];
5

Trình duyệt sẽ giải mã chuỗi và hiển thị hình ảnh.

Để chuyển đổi một

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 thành base64, chúng ta sẽ sử dụng đối tượng
new Blob[blobParts, options];
59 được tích hợp sẵn. Nó có thể đọc dữ liệu từ Blobs ở nhiều định dạng. Trong chương tiếp theo, chúng tôi sẽ đề cập sâu hơn về nó

Đây là bản demo tải xuống một đốm màu, bây giờ thông qua cơ sở-64

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4

Cả hai cách tạo URL của

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 đều có thể sử dụng được. Nhưng thường thì
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
41 đơn giản và nhanh hơn

URL. tạoObjectURL[blob]

  • Chúng ta cần thu hồi chúng nếu quan tâm đến bộ nhớ
  • Truy cập trực tiếp vào blob, không “mã hóa/giải mã”

Blob đến url dữ liệu

  • Không cần phải thu hồi bất cứ điều gì
  • Mất hiệu năng và bộ nhớ trên các đối tượng lớn
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    4 để mã hóa

Hình ảnh thành đốm màu

Chúng tôi có thể tạo một

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 hình ảnh, một phần hình ảnh hoặc thậm chí tạo ảnh chụp màn hình trang. Thật tiện lợi để tải nó lên đâu đó

Các thao tác hình ảnh được thực hiện thông qua phần tử

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
44

  1. Vẽ một hình ảnh [hoặc một phần của nó] trên canvas bằng canvas. vẽhình ảnh
  2. Gọi phương thức canvas. toBlob[gọi lại, định dạng, chất lượng] tạo một
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    4 và chạy
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    46 cùng với nó khi hoàn tất

Trong ví dụ bên dưới, một hình ảnh chỉ được sao chép, nhưng chúng tôi có thể cắt từ hình ảnh đó hoặc chuyển đổi hình ảnh đó trên canvas trước khi tạo một đốm màu

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
2

Nếu chúng tôi thích

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
47 thay vì gọi lại

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
0

Để chụp màn hình một trang, chúng ta có thể sử dụng thư viện như https. //github. com/niklasvh/html2canvas. Những gì nó làm chỉ là đi qua trang và vẽ nó trên

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
44. Sau đó, chúng tôi có thể nhận được một
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 của nó theo cách tương tự như trên

Từ Blob đến ArrayBuffer

Hàm tạo

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 cho phép tạo blob từ hầu hết mọi thứ, kể cả bất kỳ
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
9 nào

Nhưng nếu chúng ta cần thực hiện xử lý cấp thấp, chúng ta có thể lấy

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
3 cấp thấp nhất từ ​​
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
23

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
1

Từ Blob đến luồng

Khi chúng tôi đọc và ghi vào một đốm màu lớn hơn

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
24, việc sử dụng
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
25 trở nên tốn nhiều bộ nhớ hơn đối với chúng tôi. Tại thời điểm này, chúng ta có thể trực tiếp chuyển đổi blob thành luồng

Luồng là một đối tượng đặc biệt cho phép đọc từng phần từ nó [hoặc ghi vào nó]. Nó nằm ngoài phạm vi của chúng tôi ở đây, nhưng đây là một ví dụ và bạn có thể đọc thêm tại https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Streams_API. Luồng thuận tiện cho dữ liệu phù hợp để xử lý từng phần

Phương thức

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
27 của giao diện
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 trả về một
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
28 mà khi đọc sẽ trả về dữ liệu chứa trong
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4

Sau đó, chúng ta có thể đọc từ nó, như thế này

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
2

Bản tóm tắt

Trong khi

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
3,
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
01 và các
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
9 khác là “dữ liệu nhị phân”, một Blob đại diện cho “dữ liệu nhị phân có loại”

Điều đó làm cho Blobs thuận tiện cho các thao tác tải lên/tải xuống, vốn rất phổ biến trong trình duyệt

Các phương thức thực hiện yêu cầu web, chẳng hạn như XMLHttpRequest, tìm nạp, v.v., có thể hoạt động với

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 nguyên bản, cũng như với các loại nhị phân khác

Chúng ta có thể dễ dàng chuyển đổi giữa

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 và kiểu dữ liệu nhị phân cấp thấp

  • Chúng ta có thể tạo một
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    4 từ một mảng đã nhập bằng cách sử dụng hàm tạo
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    06
  • Chúng tôi có thể lấy lại
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    3 từ Blob bằng cách sử dụng
    // create Blob from a string
    let blob = new Blob[["…"], {type: 'text/html'}];
    // please note: the first argument must be an array [...]
    23, sau đó tạo chế độ xem trên đó để xử lý nhị phân cấp thấp

Luồng chuyển đổi rất hữu ích khi chúng tôi cần xử lý đốm màu lớn. Bạn có thể dễ dàng tạo một

// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
28 từ một đốm màu. Phương thức
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
27 của giao diện
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
4 trả về một
// create Blob from a string
let blob = new Blob[["…"], {type: 'text/html'}];
// please note: the first argument must be an array [...]
28 mà khi đọc sẽ trả về dữ liệu chứa trong đốm màu

Chủ Đề