programming javascript

JavaScript chuyển đổi blob thành tệp và tải xuống

Các đốm màu là các đối tượng bất biến đại diện cho dữ liệu chưa được xử lý. Tệp là một Blob có nguồn gốc từ dữ liệu từ hệ thống tệp. Các đốm màu cho phép chúng tôi tạo các đối tượng giống như tệp trên máy khách mà chúng tôi có thể chuyển sang API và các API này mong đợi các URL thay vì cần máy chủ cung cấp tệp. Trong bài viết này, chúng ta sẽ thảo luận về JavaScript Blob với một số ví dụ

JavaScript Blob là gì?

Một đối tượng blob chỉ đơn giản là một tập hợp các byte chứa dữ liệu được lưu trữ trong một tệp. Một đốm màu có vẻ là một tham chiếu đến tệp thực, nhưng không phải vậy. Một đốm màu có cùng kích thước và MIME như một tệp đơn giản. Dữ liệu blob được lưu trữ trong bộ nhớ của người dùng và nó phụ thuộc vào các chức năng của trình duyệt và kích thước của blob. Tệp này là dẫn xuất của blob và nó có thể được sử dụng ở cùng những nơi mà tệp được sử dụng. Các đốm màu rất hữu ích để lưu trữ dữ liệu nhị phân vì nội dung của chúng có thể dễ dàng đọc dưới dạng ArrayBuffer

Các đốm màu có thể được trình duyệt web lưu trữ trong bộ nhớ hoặc trên đĩa và chúng có thể biểu thị các bit dữ liệu thực sự khổng lồ quá lớn để vừa với bộ nhớ chính trừ khi trước tiên được tách thành các phần nhỏ hơn bằng phương thức slice []

Cú pháp tạo blob

Cú pháp để tạo một đốm màu JavaScript có thể được định nghĩa là

Trong cú pháp này,

Blobparts. Nó là một mảng các giá trị Blob, BufferSource và chuỗi
Tùy chọn. Nó là một đối tượng tùy chọn
Loại. Nó là một loại Blob, thường là loại MIME giống như hình ảnh. png

Ví dụ

Hãy lấy một ví dụ để hiểu cách tạo một đốm màu JavaScript trong chương trình

đầu ra. Sau khi thực thi mã này, chúng tôi sẽ nhận được kết quả như hình bên dưới trong ảnh chụp màn hình. Khi chúng tôi thực thi chương trình, nó sẽ trực tiếp tải xuống tệp trong thời gian chạy

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách lưu BLOB [Dữ liệu nhị phân] dưới dạng tệp PDF bằng JavaScript

Tệp PDF sẽ được tải xuống dưới dạng BLOB [Dữ liệu nhị phân] bằng lệnh gọi AJAX XmlHttpRequest và sau đó sẽ được gửi để tải xuống trong Trình duyệt bằng JavaScript

Vị trí của tập tin

Tệp PDF được lưu trữ trong thư mục có tên Tệp bên trong thư mục dự án

Lưu ý . Bạn cũng có thể đặt URL của tệp PDF có thể thuộc về cùng một máy chủ hoặc bất kỳ vị trí máy chủ nào khác.

Lưu BLOB dưới dạng tệp PDF bằng JavaScript

Khi nhấp vào nút Tải xuống, chức năng DownloadFile JavaScript được gọi

Bên trong hàm DownloadFile JavaScript, URL của Tệp được truyền dưới dạng tham số cho lệnh gọi GET của lệnh gọi JavaScript XmlHttpRequest

Sau đó, bên trong trình xử lý sự kiện onload, Mảng Byte nhận được [Dữ liệu nhị phân] được chuyển đổi thành đối tượng BLOB và Tệp được tải xuống trong Trình duyệt

Tại thời điểm này, tôi cho rằng không có cách nào tốt hơn là tìm-thay thế để tăng các "số phiên bản" này trong tất cả các thẻ tập lệnh?

Bạn có thể có một hệ thống kiểm soát phiên bản làm điều đó cho bạn?

Đối tượng


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 đại diện cho một đốm màu, là một đối tượng giống như tệp của dữ liệu thô, không thay đổi;

Các đốm màu có thể biểu thị dữ liệu không nhất thiết phải ở định dạng gốc JavaScript. Giao diện


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

7 dựa trên


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5, kế thừa chức năng blob và mở rộng nó để hỗ trợ các tệp trên hệ thống của người dùng

Sử dụng các đốm màu

Để xây dựng một


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 từ các đối tượng và dữ liệu không phải đốm màu khác, hãy sử dụng hàm tạo


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

1. Để tạo một đốm màu chứa một tập hợp con dữ liệu của một đốm màu khác, hãy sử dụng phương thức


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

2. Để có được một đối tượng


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 cho một tệp trên hệ thống tệp của người dùng, hãy xem tài liệu


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

Các API chấp nhận đối tượng


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 cũng được liệt kê trong tài liệu


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

Người xây dựng


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

Trả về một đối tượng


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 mới được tạo có chứa một phép nối của tất cả dữ liệu trong mảng được truyền vào hàm tạo

Thuộc tính cá thể


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

9 Chỉ đọc

Kích thước, tính bằng byte, của dữ liệu chứa trong đối tượng


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

function showViewLiveResultButton[] {
  if [window.self !== window.top] {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector["p"];
    p.textContent = "";
    const button = document.createElement["button"];
    button.textContent = "View live result of the example code above";
    p.append[button];
    button.addEventListener["click", [] => window.open[location.href]];
    return true;
  }
  return false;
}

if [!showViewLiveResultButton[]] {
  function typedArrayToURL[typedArray, mimeType] {
    return URL.createObjectURL[
      new Blob[[typedArray.buffer], { type: mimeType }]
    ];
  }
  const bytes = new Uint8Array[59];

  for [let i = 0; i  window.open[location.href]];
    return true;
  }
  return false;
}

if [!showViewLiveResultButton[]] {
  function typedArrayToURL[typedArray, mimeType] {
    return URL.createObjectURL[
      new Blob[[typedArray.buffer], { type: mimeType }]
    ];
  }
  const bytes = new Uint8Array[59];

  for [let i = 0; i  window.open[location.href]];
    return true;
  }
  return false;
}

if [!showViewLiveResultButton[]] {
  function typedArrayToURL[typedArray, mimeType] {
    return URL.createObjectURL[
      new Blob[[typedArray.buffer], { type: mimeType }]
    ];
  }
  const bytes = new Uint8Array[59];

  for [let i = 0; i  {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];

Trả về một lời hứa giải quyết bằng một chuỗi chứa toàn bộ nội dung của


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 được hiểu là văn bản UTF-8

ví dụ

Tạo đốm màu

Hàm tạo


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

1 có thể tạo các đốm màu từ các đối tượng khác. Ví dụ: để tạo một đốm màu từ chuỗi JSON


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

Tạo một URL đại diện cho nội dung của một mảng đã nhập

Đoạn mã sau tạo một mảng đã nhập JavaScript và tạo một


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 mới chứa dữ liệu của mảng đã nhập. Sau đó, nó gọi

const reader = new FileReader[];
reader.addEventListener["loadend", [] => {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];

5 để chuyển đốm màu thành một URL

HTML


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

JavaScript

Phần chính của mã này cho các mục đích ví dụ là hàm

const reader = new FileReader[];
reader.addEventListener["loadend", [] => {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];

6, tạo ra một


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 từ mảng đã nhập đã cho và trả về một URL đối tượng cho nó. Sau khi chuyển đổi dữ liệu thành một URL đối tượng, nó có thể được sử dụng theo một số cách, bao gồm làm giá trị của thuộc tính

const reader = new FileReader[];
reader.addEventListener["loadend", [] => {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];

9 của phần tử

const reader = new FileReader[];
reader.addEventListener["loadend", [] => {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];

8 [tất nhiên là giả sử dữ liệu có chứa hình ảnh]

function showViewLiveResultButton[] {
  if [window.self !== window.top] {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector["p"];
    p.textContent = "";
    const button = document.createElement["button"];
    button.textContent = "View live result of the example code above";
    p.append[button];
    button.addEventListener["click", [] => window.open[location.href]];
    return true;
  }
  return false;
}

if [!showViewLiveResultButton[]] {
  function typedArrayToURL[typedArray, mimeType] {
    return URL.createObjectURL[
      new Blob[[typedArray.buffer], { type: mimeType }]
    ];
  }
  const bytes = new Uint8Array[59];

  for [let i = 0; i  {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];

Một cách khác để đọc nội dung từ một


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 là sử dụng một


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

84. Đoạn mã sau đọc nội dung của


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

5 dưới dạng văn bản


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

Hoặc bằng cách sử dụng

const reader = new FileReader[];
reader.addEventListener["loadend", [] => {
  // reader.result contains the contents of blob as a typed array
}];
reader.readAsArrayBuffer[blob];


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

Bằng cách sử dụng các phương pháp khác của


  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.

81, có thể đọc nội dung của Blob dưới dạng chuỗi hoặc URL dữ liệu

Làm cách nào để tải xuống tệp BLOB trong JavaScript?

Sử dụng Blob để tải tệp xuống .

Sử dụng API tìm nạp để tải xuống tệp tập lệnh

Chuyển đổi dữ liệu thành loại blob

Chuyển đổi đối tượng blob thành chuỗi bằng cách sử dụng URL. tạoObjectURL[]

Create an element to download the string..

JavaScript Blob là gì?

Cú pháp tạo blob

Ví dụ

Sử dụng các đốm màu

Người xây dựng

Thuộc tính cá thể

ví dụ

Tạo đốm màu

Tạo một URL đại diện cho nội dung của một mảng đã nhập

HTML

JavaScript

Làm cách nào để tải xuống tệp BLOB trong JavaScript?

Làm cách nào để chuyển đổi tệp BLOB sang PDF trong JavaScript?

Làm cách nào để tải lên tệp BLOB trong JavaScript?

Làm cách nào để đọc BLOB trong JavaScript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề