Tệp tải xuống javascript từ nội dung phản hồi

Tải xuống các tệp trong Javascript từ Nút. js sử dụng Express. khung js. Xin chào, lâu rồi không gặp. Trong bài viết này, tôi muốn hướng dẫn bạn cách tải xuống các tệp trong Javascript, hoặc bạn sử dụng Vue. js, React, Angular, jQuery hoặc Vanilla JS. Về phía phụ trợ, chúng tôi chạy trên Node. js sử dụng Express. js và tôi chỉ viết trình xử lý của tuyến đường

phụ trợ

import cors from 'cors';
import fs from 'fs';

.get('/download',
  cors({
    exposedHeaders: ['Content-Disposition'],
  }),
  async (req, res) => {
    try {
      const fileName = 'file.pdf'
      const fileURL = '/path/to/file/file.pdf'
      const stream = fs.createReadStream(fileURL);
      res.set({
        'Content-Disposition': `attachment; filename='${fileName}'`,
        'Content-Type': 'application/pdf',
      });
      stream.pipe(res);
    } catch (e) {
      console.error(e)
      res.status(500).end();
    }
  };
})

Mã này là tất cả những gì bạn cần để tải xuống bất kỳ tệp nào từ back-end. Trong ví dụ này, tôi đã sử dụng tệp .pdf, nhưng bạn có thể thay đổi loại nội dung, ở dòng 15

Điều rất quan trọng là sử dụng CORS làm phần mềm trung gian để xác định tiêu đề nào được tiếp xúc với thư viện Axios, ở phía giao diện người dùng. Chúng ta cần đặt Content-Disposition, được khai báo ở dòng _1_4, để thông báo cho khách hàng về yêu cầu này có tệp đính kèm và tên tệp

giao diện người dùng

import Axios from 'axios'
const response = await Axios.get('API_URL/download', { responseType: 'blob' });
if (response.data.error) {
  console.error(response.data.error)
}

const fileURL = window.URL.createObjectURL(new Blob([response.data]));
const fileLink = document.createElement('a');
fileLink.href = fileURL;
const fileName = response.headers['content-disposition'].substring(22, 52);
fileLink.setAttribute('download', fileName);
fileLink.setAttribute('target', '_blank');
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove();

Chúng ta cần tạo một đối tượng HTML để có thể tải xuống tệp

 href="" download="">

tùy chọn khác

Mở blob trực tiếp vào trình duyệt

const response = await Axios.get('API_URL/download', { responseType: 'blob' });
const file = window.URL.createObjectURL(new Blob([response.data]));
window.open(file);

Đầu tiên, chúng tôi cần gửi yêu cầu tới máy chủ, vì chúng tôi sử dụng Axios. Như bạn có thể thấy URL là API_URL, URL cơ sở của bạn và tuyến đường API /download, được xác định ở trên. Cần thông báo cho Axios rằng phản hồi đã đợi thuộc loại blob, vì phản hồi không phải là văn bản thuần túy hoặc JSON. Với phản hồi đó, hãy tạo một đối tượng mới và đính kèm nội dung đó vào thẻ HTML a mới

Tôi hy vọng bạn thích bài viết và nó hữu ích. Nếu bạn có bất kỳ vấn đề nào hoặc muốn thêm một số ghi chú, vui lòng để lại cho tôi trong phần bình luận bên dưới và tôi sẽ cố gắng trả lời nhanh nhất có thể. Hãy nhấn nút thích bên dưới và chia sẻ bài viết này, nó giúp tôi rất nhiều

Làm cách nào để tải xuống tệp từ phản hồi API trong JavaScript?

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

Làm cách nào để tải xuống tệp bằng jQuery?

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