反应 - 单击简历标题不会下载简历 pdf 文件答案

【问题标题】：REACT - Clicking on Resume header doesn't download resume pdf file反应 - 单击简历标题不会下载简历 pdf 文件
【发布时间】：2019-10-26 11:00:45
【问题描述】：

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

但如果有人知道如何使用链接标记来做到这一点，将不胜感激！

【问题讨论】：

为什么需要使用链接？你的解决方案是正确的。链接用于路由组件，不用于下载。

标签： javascript html reactjs react-redux react-router

【解决方案1】：

如果我们使用标签之类的链接将在新窗口中打开，但您必须从那里下载。

如果要直接下载文件，可以使用下面的npm包。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

解决方案：

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

【讨论】：