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
// 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];
}];
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
// 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];
}];
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
// 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];
}];
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ớ