REACT -单击简历标题不会下载简历pdf文件

Question

我正在使用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>

在我的resume.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>

但是如果有人知道如何使用链接来标记它，我们将不胜感激！

Answer 1

如果我们使用像这样的标签，链接将在一个新窗口中打开，但你必须从那里下载它。

如果您想直接下载文件，可以使用下面的NPM包。

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

Answer 2

解决方案：

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

Answer 3

您正在从服务器提供静态文件，设置响应头应该可以解决此问题

对于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>