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

Question

我正在使用 React 创建一个投资组合网站。我希望它在单击简历链接时自动下载 pdf 文件。但是，它不起作用。我正在使用 npm，但文件未通过本地主机下载。

尝试添加链接和下载标签。还将 pdf 文件移动到我的公共(public)文件夹。

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