Как открыть PDF-файл в браузере вместо того, чтобы скачивать его? - PullRequest
Новая
       178

Как открыть PDF-файл в браузере вместо того, чтобы скачивать его?

1 голос
/ 14 июля 2020

У меня есть api, который предоставляет json -объект со ссылкой на pdf 

{ pdf_link: 'http://localhost:3000/logs.pdf' }

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

Я попытался указать URL-адрес как href в теге a

<a href={response.pdf_link} target='_blank'>{FileName}</a>

Но когда я нажимаю на ссылку, pdf загружается, а не открывается в вкладка браузера.

Я нашел это сообщение в блоге и попробовал следующее. 

import axios from 'axios';
import React from 'react';

export const PdfLink = ({ apiResponse }: any) => {

  const showFile = (blob: Blob, fileName: string) => {
    const newBlob = new Blob([blob], {type: 'application/pdf'});

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(newBlob);
      return;
    }

    const data = window.URL.createObjectURL(newBlob);
    const link = document.createElement('a');
    link.href = data;
    link.download = fileName;
    link.click();

    setTimeout(() => {
      window.URL.revokeObjectURL(data);
    }, 100);
  };

  const onClickLink = () => {
    axios({
      method: 'GET',
      responseType: 'blob',
      url: apiResponse.pdf_link,
    })
    .then(r => showFile(r.data, apiResponse.fileName));
  };

  return (
    <span className='link' onClick={onClickLink}>
      file.pdf
    </span>
  );
};

Но это не удается при вызове api для получения файла blob. 

axios({
      method: 'GET',
      responseType: 'blob',
      url: apiResponse.pdf_link,
    })

Ошибка: Access to XMLHttpRequest at 'http://localhost:3005/file.pdf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

На изображении ниже показаны заголовки запроса и ответа вызова API

введите описание изображения здесь

Я знаю, что указанная выше ошибка вызвана cors, но на сервере я также разрешаю запросы из других источников

app.use(KoaCors({ origin: '*', credentials: true }));

Что такое Я делаю не так?

1 Ответ

0 голосов
/ 14 июля 2020

Вы можете использовать тег объекта для отображения pdf: - 

<object
        data={/* url of your pdf file*/}
        type="application/pdf"
        width="100%"
        height="100%"
></object>

Для получения дополнительной информации смотрите здесь https://www.w3schools.com/tags/tag_object.asp

...