загруженный файл PDF в неправильном формате

Question

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

Вот мой код

 fetchPdfDownload = (fileName) => {
    return axios.get(`/api/pdf`, {
      params: {
        'file': fileName,
      },
    })
  }
async onClick () {
    try {
      let response = await this.fetchPdfDownload(this.props.symbol)

      const url = window.URL.createObjectURL(new Blob([response.data], {type: "application/pdf; encoding=UTF-8"}));
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', 'file.pdf')
      document.body.appendChild(link)
      link.click()
    } catch (e) {
      console.log(e)
    }
  }

Я пытаюсь найти метод здесь. Я пытаюсь изменить responseType на «blob» и «arraybuffer», но, похоже, это не дает никакого эффекта. PDF кажется иметь ту же страницу, что и сервер pdf, но без содержимого.

Вот пример заголовка

 content-disposition: attachment; filename=example.pdf; filename*=UTF-8''example.pdf 
 content-length: 592283 
 content-type: application/pdf 
 date: Thu, 30 Aug 2018 17:43:06 GMT 
 server: Kestrel 
 x-powered-by: ASP.NET 

Кто-нибудь знает, что происходит.

Answer 1

Я не уверен, почему вы не просто создаете адрес, который вы собираетесь передать axios напрямую, но я думаю, что axios может возвращать ваш PDF в неправильном формате, что приводит к неправильному поведению Blob().

Я не знаю, как заставить axios превращать вещи в Buffer s, но я знаю, как сделать это с помощью fetch. Учтите следующее:

async function loadPDF(fileName) {
    const res = await fetch(`/api/pdf?file=${fileName}`);
    const buff = await res.blob();
    const url = window.URL.createObjectURL(buff);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "file.pdf");
    document.body.appendChild(link);
    link.click();
}

Используя axios, это работало с PDF, который я пробовал:

async function loadPDF(fileName) {
    const blob = await axios.get(`/api/pdf?file=${fileName}`, {
        responseType: "blob"
    });
    const url = window.URL.createObjectURL(blob.data);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "file.pdf");
    document.body.appendChild(link);
    link.click();
}