Question

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

试图添加链接并下载标签。还将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>

REACT-单击“ Resume”标头不会下载简历pdf文件

3 个答案: