REACT - Нажатие на заголовок Resume не загружает файл pdf резюме. - PullRequest
1 голос
/ 12 июня 2019

Я создаю веб-сайт портфолио, используя React. Я хотел бы, чтобы он автоматически загружал файл PDF при нажатии на ссылку резюме. Тем не менее, это не работает. Я использую npm, и файл не загружается через localhost.

Попытка добавления ссылки и загрузки тега. Также переместил pdf файл в мою общую папку.

На моей странице App.js:

import React from 'react';
import './App.css';
import {Layout, Header, Navigation, Drawer, Content, download} from 'react-mdl';
import Main from './components/main';
import { Link } from 'react-router-dom';

function App() {
  return (
    <div className="demo-big-content">
    <Layout>
        <Header className="header-color" title="Title" scroll>
            <Navigation>
                <Link to="http://localhost:3000/">Home</Link>
                <Link to="DeveloperResFINALReactNot.pdf" download>Resume</Link>
                <Link to="/aboutme">About Me</Link>
                <Link to="/projects">Projects</Link>
                <Link to="/contact">Contact</Link>
            </Navigation>
        </Header>

На моей странице резюме.js:

import React, {Component } from 'react';


class Resume extends Component {
  render() {
    return(
      <div>
        <h1> Resume Page </h1>
      </div>
    )
  }
}

export default Resume;

Ожидается загрузка файла резюме после нажатия, вместо этого он просто возвращает пустую белую страницу.

ОБНОВЛЕНИЕ: Решена проблема, заменив ее на:

<a href="DeveloperResFINALReactNot.pdf" download>Resume</a>

Но если кто-нибудь знает, как это сделать, используя ссылку на тег, это будет очень ценно!

Ответы [ 3 ]

1 голос
/ 10 июля 2019

Если мы используем теги, такие как ссылка откроется в новом окне, но вы должны загрузить ее оттуда.

Если вы хотите загрузить файл напрямую, вы можете использовать следующий пакет NPM.

https://www.npmjs.com/package/file-saver

0 голосов
/ 13 июня 2019

Вы обслуживаете статический файл с сервера, настройка заголовка ответа должна помочь

Для сервера NodeJS

var pdf = fs.createReadStream('./path-to-file-location/DeveloperResFINALReactNot.pdf');

app.get('/downloadPdf', function(req, res){
  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'attachment; filename=DeveloperResFINALReactNot.pdf');
  pdf.pipe(res);
});

со стороны клиента

<a href="/downloadPdf">downloadPdf</a>
0 голосов
/ 13 июня 2019

Решение:

<a href="DeveloperResFINALReactNot.pdf" download>Resume</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...