迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

在 Angular 中下载文件

作者:迹忆客 最近更新:2023/04/14 浏览次数:

我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。


Angular 中的文件下载

在 Angular 中下载文件很简单。我们可以使用 HTML5 download 属性下载文件。

# angular
<a href="FilePath.csv"
class="btn"
target="_blank"
download="FileName.csv"
>Download Now</a>

例子

首先,我们将在 src 文件夹中创建一个 assets 文件夹,并将我们要下载的文件存储在 assets 文件夹中。

我们将在 app.component.html 中添加以下代码。

# angular
<hello name="{{ name }}"></hello>
<a href="assets/download.csv"
class="btn btn-default"
target="_blank"
download="download.csv"
>Download Now</a>

输出:

以 Angular 示例显示下载文件

我们将通过在 app.component.css 中添加以下代码来设置按钮样式。

# angular
p {
  font-family: Lato;
}
.btn{
  padding: 10px;
  background-color: blueviolet;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

输出:

在 css 之后以 Angular 示例下载文件

当我们点击 Download Now 按钮时,它将下载存储在 assets 文件夹中的文件。

输出:

angular 中的下载文件结果

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中拖放

发布时间:2023/04/14 浏览次数:105 分类:Angular

本教程演示了如何在 Angular 中使用拖放。我们将介绍@angular/cdk/drag-drop 模块来完成 angular 中的拖放。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便