无法使用react和href元素在localhost中下载pdf文件

Question

我很难尝试从我的反应应用程序将pdf文件下载到我的桌​​面上。我之前已经发布了此问题How to download pdf file with React。现在我收到了一个答案，但是实施它并且随后的建议已经变得平淡无奇。然而，我认为那些没有看过这个问题的人可能会帮助我，因为我很难解决这个问题。所以这里。

我有一个具有以下树结构的反应应用程序：

app
|
|- Readme.md
|- index.html
|- node_modules
|- package.json
|- resume.pdf  -------> This is the file I want downloaded
|- src
    |
    |-App.css
    |- App.js
    |- App.test.js
    |- favicon.ico
    |- index.css
    |- index.js
    |- assets
    |-modules
       |-skills.js -----> Here is where I reference it.

这是我引用skills.js链接的<a>的一部分：

class Skills extends Component {
render() {
    return (
      <div>
        <ReactHighcharts neverReflow={true} config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
        <a href="resume.pdf" download="resume.pdf">Click to Download My Resume</a>
      </div>
    );
  }
}

当我点击Chrome上的按钮时，出现Failed - No File错误。我被告知有这样的目录结构，并在<a>链接中引用pdf文档。

当我尝试点击控制台中的链接localhost:3000/resume.pdf时，我发现此错误browser.js:49 Warning: [react-router] Location "/resume.pdf" did not match any routes

在网络标签中，我看到

当我在Firefox中尝试相同的东西并下载它时，firefox说

The file resume.pdf could not be opened. It may be damaged or use a file format that Preview doesn't recognize.

我真的可以在这里使用一些帮助。我不知道为什么我根本无法下载这个pdf。有没有人知道会出现什么问题？

Answer 1

我认为有两种方法可以解决这个问题......

1。添加路径到您的服务器。

假设您正在使用Express，请添加静态路径。然后，您需要在应用根目录中创建一个public文件夹，并将文件放在那里。

// add static path
app.use(express.static(path.join('public')));

您也可以在技术上手动定义路线。

app.get('resume.pdf',(req, res) => {
  res.sendFile('/resume.pdf')
})

2。的WebPack

如果您使用Webpack捆绑您的应用程序，则可以添加一个加载程序来处理pdf文件并使其在最终捆绑包中可用。这与JS模块需要的方式相同，然后包含在构建中。

$ npm install --save file-loader
// add the loader to webpack.config.js
...
loaders: {
  {
    test: /\.pdf$/,
    loader: 'file?name=[name].[ext]'
  }
 ...
}

然后，在您的组件中需要文件而不是引用路径。

<a href={require(../relativeToDirectory/resume.pdf)} download="resume.pdf">Click to Download My Resume</a>

（注意，我对此最不自信，因为我使用它是一个不同的用例，因为我采用最终的构建文件夹，压缩它，然后上传到我的服务器。它可能只在服务器上有用已经处理静态路径了）。还有url-loader，它将文件转换为base64字符串并将其嵌入到网址中...它可以工作而不是file-loader。

Answer 2

以下代码在我的项目中有效， 我只是下载了一个静态文本文件：

import React from 'react'
import agent_file from './MANIFEST.txt';

class HelpPage extends React.Component{
state = {}
render() {
return(
<div>
    <a href={agent_file} download="MANIFEST.txt">Click to download manifest</a>        
</div>
);
}
}
export default HelpPage;

Answer 3

另一个选择是使用“ window.open（）”。例如：

<div onClick={ () => window.open(require('../path-to-your/filename.pdf'), '_none')}>
</div>

Answer 4

只需将您的 pdf 文件放在 public 附近的 index.html 文件夹中，然后

<a href="your_file.pdf" download>Description</a>

Answer 5

好吧，如果您尝试在前端上传简历，那么在您托管时可能无法正常工作，因为在 prod env 中，它需要构建文件夹，并且 npm run build 只会执行一次，因此无论您在目录中上传什么，它都会获胜除非你执行 npm run build

，否则不要反射