协助在我的本地主机应用程序上下载文件

2023-12-31

我有一个 ReactJS 网络应用程序。在其中一个页面上,我希望用户单击下载按钮,然后能够下载我的 pdf 文件assets文件夹。我在尝试执行此操作时似乎遇到了一些问题。这是我尝试过的。

作为参考,我已经尝试过此中提出的解决方案question https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript

答案指出要这样做:

<a href="path_to_file" download="proposed_file_name">Download</a>

因此,在我的第一次尝试中,我有一个如下所示的按钮:

<a href="../assets/resume.pdf" download="Resume">Download</a>

我在浏览器上收到的错误是Failed- No file。我认为我的路径是错误的,所以我尝试了很多变体,甚至是绝对路径,结果是相同的。找不到该文件。

在第二次尝试中,我发现了另一个堆栈溢出question https://stackoverflow.com/questions/18246053/how-can-i-create-a-link-to-a-local-file-on-a-locally-run-web-page/18246357

这个问题的答案宣告了这个答案:

<a href="file:///C:\Programs\sort.mw">Link 1</a>

当我尝试用自己的目录路径实现第二个答案时,我收到一个Failed - Network error问题。我有什么遗漏的吗?

很久以前,我能够在线托管该文件,但似乎将文件像图像和样式表一样放在目录系统中应该是一件容易的事情。我在这里错过了什么吗?如有帮助,将不胜感激。

- - - 编辑 - - -

文件结构如下所示:

react-site
  -- node_modules
  -- package.json
  -- index.html
  -- resume.pdf
  -- README.md
  -- src
     |
     | -- a bunch of files
     | -- assets
     |     
     | -- modules
          |
           - skill.js * This is where I reference the download

------- 编辑 #2 ------

技能.js:

40   class Skills extends Component {
 41   render() {
 42     return (
 43       <div>
 44         <ReactHighcharts config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
 45         <div>
 46           <a href="resume.pdf" download="Resume">Download</a>
 47           <RaisedButton label="Download Resume" primary={true}/>
 48         </div>
 49       </div>
 50     );
 51   }
 52 }
 53
 54 export { Skills };

您必须指定相对于 HTML 文件的文件位置,即

<a href="src/assets/resume.pdf" download="Resume">Download</a>

确保该文件夹在 Web 服务器上公开可用。您可能还想将其移出src文件夹,因为这可能会产生误导。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

协助在我的本地主机应用程序上下载文件 的相关文章

随机推荐

  • 修复翻译错误

    liferay 门户中有很多地方翻译成我的语言 sk SK 是错误的 是否可以用 hook 重写那些不好的翻译 任何其他想法都欢迎 多谢 是的 你可以做到 in your liferay hook xml文件添加要覆盖的语言文件的条目 就像
  • 嵌套在结构中的 LINQ 和分组依据数据

    我的结构大致如下 List
  • android.view.WindowManager$BadTokenException:无法在 Toast 处添加窗口

    当我在我的 Android 应用程序上频繁执行某些操作 我的假设是由于 Toast 消息 时 出现以下错误 我没有得到此问题的确切位置 我可以从某人那里获得帮助来解决相同问题吗 beginning of crash 10 04 16 13
  • C# 通用约束问题

    我收到以下错误 类型 Test ICacheProvider 不能用作类型参数 泛型类型或方法中的 TStorageProvider StorageManager Test IFileInfo 没有 隐式引用转换自 StorageManag
  • 将 blob 转换为图像流并将其分配给 jLabel

    我只是想将数据库中的 blob 字符串转换为字节数组 然后在转换后将其转换为缓冲图像 然后将其分配给标签 这是我的代码 package ims project import java sql import javax swing impor
  • jQuery 仅获取此元素的父同级元素

    我不知道如何写这个 请参阅我的标记结构 该结构在页面上重复多次 div class module div class archive info span class archive meta open span div div class
  • Google 地图 fitBounds 无法正常工作

    我对 googlemaps fitBounds 函数有疑问 for var i 0 i lt countries length i var country countries i var latlng new google maps Lat
  • JavaScript 中去除字符串中的所有非数字字符

    考虑一个非 DOM 场景 您希望使用 JavaScript ECMAScript 从字符串中删除所有非数字字符 范围内的任何字符0 9应该保留 var myString abc123 8
  • 如何高效解析固定宽度文件?

    我正在尝试找到一种有效的方法来解析包含固定宽度行的文件 例如 前 20 个字符代表一列 从 21 30 开始代表另一列 依此类推 假设该行包含 100 个字符 将一行解析为多个组成部分的有效方法是什么 我可以对每行使用字符串切片 但如果行很
  • 具有多个条件的布尔索引[重复]

    这个问题在这里已经有答案了 我有一个熊猫DF我需要去哪里filter输出一些包含特征 a 和特征 b 的值 0 的行 为了检查这些值 我运行以下命令 DF1 DF DF a 0 它返回正确的值 同样 通过这样做 DF2 DF DF b 0
  • 来自 Pyspark ArrayType 列的随机样本

    我在 Pyspark 数据框中有一列 其结构如下 Column1 a b c d e c b d f g h i p l m 我想返回另一列 其中随机选择每行中的每个数组 以及函数中指定的数量 所以像data withColumn samp
  • 在套接字上多次调用listen——预期的行为?

    我在使用简单的基于 C 的服务器时注意到一些奇怪的事情 我的 Linux 4 10 3 系统上的程序 我不小心打通了电话listen 我在套接字上两次 来自服务器进程 被称为bind 早些时候 我注意到两个监听电话 成功 没有任何错误 事实
  • NSRulerView 如何将行号与正文正确对齐

    我在 MacOS 中使用 NSRulerView 来显示 NSTextView 旁边的行号 两个视图共享相同的字体和相同的字体大小 但是 在 NSTextView 中 字符串渲染是自动管理的 而在 NSRulerView 中 我需要计算正确
  • Symfony2 - 如何在控制器中使用 __construct() 并访问 Securty.Context?

    我在使用 Symfony2 时遇到了一些问题 即如何使用 construct 函数 官方文档非常糟糕 我希望能够使用以下内容 public function construct parent construct user this gt g
  • 修改Go GRPC服务器流拦截器上的元数据

    我一直在尝试在服务器流拦截器上设置元数据 以便实际的 RPC 函数可以在下游读取它们 func UserIDInterceptor srv interface ss grpc ServerStream info grpc StreamSer
  • 在 TestCafe 中测试运行期间累积所有 JS 警告和错误

    我希望能够在测试运行期间从浏览器控制台访问所有 J S 警告和错误 禁用 e 跳过 JS 错误 标志后 测试会在第一个错误处停止 因此显然它正在寻找它们 启用此标志后 我希望能够查看测试运行期间触发了哪些错误 最好是警告 我尝试过使用 Cl
  • 如何在没有请求正文的情况下发出 OKHTTP post 请求?

    有没有办法使用 OkHTTP 发出没有请求正文的 post 请求 RequestBody reqbody RequestBody create null new byte 0 Request Builder formBody new Req
  • 在 JavaScript 中等待不仅仅是将所有内容包装在 setTimeout 中

    因此 我正在创建一个机器人来在线玩视频游戏 完全合法 有一个用于机器人比赛的服务器 不用担心 代码是用 JavaScript 编写的 我现在刚刚开始学习 但我很难告诉机器人做某事 然后按时间或按条件等待 直到做其他事情 到目前为止 我只是将
  • OAuth2不同的客户端认证方式

    我有一个充当 OAuth 1 0a 提供商的 Web 服务 Web 应用程序通过 OAuth 1 工作流程来获取对用户资源的访问权限 到目前为止 一切都很好 客户端 Web 应用程序需要与服务进行通信以满足其他需求 以交换未链接到特定用户
  • 协助在我的本地主机应用程序上下载文件

    我有一个 ReactJS 网络应用程序 在其中一个页面上 我希望用户单击下载按钮 然后能够下载我的 pdf 文件assets文件夹 我在尝试执行此操作时似乎遇到了一些问题 这是我尝试过的 作为参考 我已经尝试过此中提出的解决方案questi