Не удается открыть файл PDF, загруженный с сервера, используя Express и Node Js

Question

Я пытаюсь отправить клиенту файл PDF, размещенный на сервере, для загрузки из браузера.Я использую экспресс и узел js.

Код на сервере:

app.get('/files', async (req, res) => {
     res.sendFile(__dirname + '/boarding-pass.pdf');
    });

Код на клиенте (реагирует на js):

const handleClick = async () => {
    const response = await axios({
        url: 'http://localhost:4000/files',
       // url: '/static/boarding-pass.pdf',
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/pdf',
            'Authorization': 'Basic d29vZG1hYzpXb29kbWFjOTI3IQ=='
        },
        responseType: 'arraybuffer',
        //responseType: 'blob', // important
    });

console.log('response', response);
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'bp.pdf');
    document.body.appendChild(link);
    link.click();
}

export default () => <div><Button onClick={() => handleClick()}>Download file</Button></div>

Если я пытаюсь открыть файл на сервере (я на Mac), файл открывается правильно, и я вижу содержимое.Однако, когда я загружаю файл из браузера, он каким-то образом поврежден или обрезан, или ему что-то не хватает, потому что я не могу открыть его, и я получаю сообщение о том, что это недопустимый файл, хотя я вижу, чтоРазмер обоих файлов в файловой системе одинаков, но если я проверяю двоичные файлы с помощью утилиты, я вижу, что оба файла различаются ..

Может кто-нибудь сказать мне, что мне не хватает, или предоставить небольшую рабочуюпример?

Спасибо

Answer 1

Вы можете попробовать альтернативу использованию BLOB-объекта.

Установите тип данных в href вашей ссылки:

link.setAttribute('href', 'data:application/pdf;base64,' + text);

или

link.setAttribute('href', 'data:application/octet-stream;base64,' + text);

илиесли вы все еще получаете поврежденный файл, закодируйте ваш контент:

link.setAttribute('href', 'data:application/pdf;charset=utf-8,' + encodeURIComponent(text));

Если это текст, я всегда использую:

link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));

И не забудьте удалить объект dom после загрузкифайл:

document.body.removeChild(link);

Это полный код:

let link= document.createElement('a');
link.setAttribute('href', ''data:application/pdf;base64,' + text);
link.setAttribute('download', 'bp.pdf');
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // Remember to remove the dom object after downloading the file

Это скрипка, демонстрирующая эту функциональность в кодировке base64 pdf:

Fiddle

Answer 2

Я думаю, вам следует изменить реализацию сервера и сделать что-то вроде следующего:

var express = require ('express');var app = express ();

app.use (express.static ('public'));app.use (express.static ('images'));

app.listen (3000);

А затем запросите хост: 3000 / bp.pdf, файл должен быть вобщедоступная папка с изображениями в корне приложения вашего узла.