JavaScript tải xuống tệp base64 lớn

Yêu cầu. Nhận dữ liệu từ API cung cấp cho chúng tôi tệp PDF ở định dạng Base64, tên tệp cũng được cung cấp. Chúng tôi cần hiển thị bản pdf này trong một tab mới để người dùng có thể xem và sau đó tải xuống

Vấn đề. Trong khi cố gắng sử dụng dữ liệu Base64 để mở PDF, nó sẽ được mở trong tab mới nhưng tên tệp không đúng. Đã thử với JS sau

var pdf_newTab = cửa sổ. mở ra("");

pdf_newTab. tài liệu. viết(

"

);

Tiêu đề của tài liệu là giá trị base64 mà chúng tôi đã cung cấp. Thậm chí đã thử sử dụng blob và data-URL nhưng tiêu đề lấy giá trị trong blob hoặc data-URL

Giải pháp. Giải pháp mà tôi đã tìm ra là vì chúng tôi có dữ liệu đến từ API bên ngoài nên chúng tôi đã hiển thị API Nhận với tên tệp là tham số đầu vào cũng ở dạng tham số đường dẫn
ví dụ. https. /GetPdf/{tên tệp}
tên tệp này chứa tham số chúng tôi cần để lấy dữ liệu từ API bên ngoài, vd. hóa đơn_{prameter} bây giờ tôi đang gọi API khi nhấp vào nút gọi nội bộ API nhận bên ngoài với các tham số và sau đó trả về dữ liệu PDF ở dạng Nhị phân với các tiêu đề "loại nội dung. ứng dụng/pdf"

Ở đây, chúng tôi lấy tên tệp là invoice_2 trong đó 2 là mã định danh được sử dụng trong API bên ngoài

Chuyển đổi đối tượng tệp JavaScript hoặc đốm màu thành chuỗi Base64 có thể hữu ích. Ví dụ: khi chúng tôi chỉ có thể gửi dữ liệu dựa trên chuỗi đến máy chủ. Trong hướng dẫn này, chúng ta sẽ khám phá cách sử dụng JavaScript để tạo chuỗi Base64 và DataURL từ một đối tượng tệp

Trong cả hai ví dụ, chúng tôi sẽ sử dụng tệp thu được từ trường nhập tệp

Mã hóa tệp dưới dạng DataURL

Chúng tôi sử dụng FileReader để chuyển đổi đối tượng tệp thành dataUR, điều này được thực hiện bằng cách sử dụng phương thức readAsDataURL

<input type="file" />

<script>
    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Encode the file using the FileReader API
        const reader = new FileReader();
        reader.onloadend = () => {
            console.log(reader.result);
            // Logs data:;base64,wL2dvYWwgbW9yZ...
        };
        reader.readAsDataURL(file);
    });
script>

Mã hóa tệp dưới dạng chuỗi Base64

Đoạn mã bên dưới tạo một chuỗi base64, nó giống với ví dụ trước nhưng nó sử dụng một biểu thức chính quy để xóa phần URL dữ liệu

<input type="file" />

<script>
    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Encode the file using the FileReader API
        const reader = new FileReader();
        reader.onloadend = () => {
            // Use a regex to remove data url part
            const base64String = reader.result
                .replace('data:', '')
                .replace(/^.+,/, '');

            console.log(base64String);
            // Logs wL2dvYWwgbW9yZ...
        };
        reader.readAsDataURL(file);
    });
script>

Tạo một URL trỏ đến một đối tượng Tệp

Đôi khi chúng ta chỉ muốn sử dụng một đối tượng File làm nguồn hình ảnh. Nhưng làm cách nào để thêm đối tượng tệp vào thuộc tính src?

Phương pháp URL.createObjectURL() có thể trợ giúp ở đây

Đoạn mã sau sẽ cập nhật nguồn hình ảnh thành tệp được tải trong đầu vào tệp

<input type="file" accept="image/*" />

<img src="" alt="" />

<script>
    // Get a reference to the file input
    const imageElement = document.querySelector('img');

    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Set file as image source
        imageElement.src = URL.createObjectURL(file);
    });
script>

Chúng tôi cần đảm bảo thu hồi URL nếu chúng tôi không cần tệp nữa. Nếu chúng tôi không làm điều này gây rò rỉ bộ nhớ

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

Làm cách nào để lấy kích thước tệp của hình ảnh Base64 trong JavaScript?

Kích thước tệp tối đa cho Base64 là bao nhiêu?

Làm cách nào để tính kích thước tệp từ chuỗi Base64?