Отображение двоичного PDF в браузере Javascript

#javascript #express #pdf #blob

#javascript #экспресс #PDF #большой двоичный объект

Вопрос:

У меня есть база данных сервера MSSQL с файлами, хранящимися в виде столбца Content типа VARBINARY(MAX) в таблице SQL.

Я разработал серверную часть Node.js сервер с Express.js для доступа к базе данных. В этом бэкэнде у меня есть вызываемый маршрут /api/file/:id_file , который принимает содержимое файла с id_file

 async getFile(req,res){
    const {id_file} = req.query
    const file= await db.Files.findOne({
        where:{
            'Id': id_file,
        }
        
    })
    res.contentType('application/pdf')
    res.send(file.Content)
}
 

Затем во внешнем интерфейсе с использованием Javascript у меня есть iframe

 <iframe id="view" src="" style='height: 500px; width: 1000px;' />
 

И я использую ajax-запрос для получения файла. Когда у меня есть ответ, я просто преобразую его в большой двоичный объект и устанавливаю атрибут src элемента iframe с кодировкой base64 большого двоичного объекта

 const reader = new FileReader();
reader.onload = () => {
  const b64 = reader.result.replace(/^data:. ;base64,/, "");
  $('#view').attr('src','data:application/pdf;base64,'  b64);
};
reader.readAsDataURL(new Blob([resp.data], { type: "application/pdf" }));
 

Когда я пытаюсь запросить файл и показать, я вижу пустой PDF-файл, ничего не отображается.

Я пропустил какой-либо шаг для преобразования содержимого файла в base64?

Ответ №1:

Вам не нужен filereader, поскольку вы не читаете файл из файловой системы или пользовательского ввода; у вас уже есть файл, извлеченный из API. Если ваши двоичные данные PDF находятся в resp.data , вам просто нужно использовать btoa

создает строку ASCII в кодировке Base64 из двоичной строки

 $('#view').attr('src','data:application/pdf;base64,'  btoa(resp.data));
 

Комментарии:

1. Спасибо, но выдает ошибку: «InvalidCharacterError: не удалось выполнить ‘btoa’ в ‘Window’: кодируемая строка содержит символы за пределами диапазона Latin1».

2. интересно. попробуйте это вместо: btoa(unescape(encodeURIComponent(resp.data)))

3. ошибка исчезает, но теперь у меня та же проблема, которую я описал в вопросе, pdf отображается как пустой документ