angular8下载本地文件
时间: 2023-11-09 16:00:10 浏览: 50
在Angular8中,可以使用以下代码下载文件到本地:
```typescript
import { saveAs } from 'file-saver';
downloadFile(fileUrl: string, fileName: string) {
fetch(fileUrl)
.then(res => {
return res.blob();
})
.then(blob => {
saveAs(blob, fileName);
});
}
```
其中,`fileUrl`是文件的下载地址,`fileName`是保存到本地的文件名。需要先通过`fetch`获取文件的`blob`对象,然后使用`file-saver`库中的`saveAs`方法保存到本地。
相关问题
angular 取项目外文件参数
如果你想在 Angular 项目中读取外部文件的参数,可以使用 Angular 的 HttpClient 来读取本地 JSON 文件。以下是一个示例代码:
1. 在项目根目录下创建一个名为 `config.json` 的文件,里面包含参数:
```json
{
"apiUrl": "http://localhost:3000/api",
"apiKey": "1234567890"
}
```
2. 创建一个名为 `config.service.ts` 的服务,并注入 HttpClient:
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ConfigService {
private configUrl = 'assets/config.json';
constructor(private http: HttpClient) { }
getConfig() {
return this.http.get(this.configUrl);
}
}
```
3. 在需要使用参数的组件中,注入 `ConfigService` 并调用 `getConfig()` 方法:
```typescript
import { Component, OnInit } from '@angular/core';
import { ConfigService } from './config.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
apiUrl: string;
apiKey: string;
constructor(private configService: ConfigService) {}
ngOnInit() {
this.configService.getConfig().subscribe((data: any) => {
this.apiUrl = data.apiUrl;
this.apiKey = data.apiKey;
});
}
}
```
4. 在 HTML 中使用参数:
```html
<p>API URL: {{ apiUrl }}</p>
<p>API Key: {{ apiKey }}</p>
```
这样,你就可以在 Angular 项目中读取外部文件的参数了。
angular 配置文件详解
Angular的配置文件在不同版本中会有所不同。在Angular CLI中,旧版本使用angular-cli.json作为配置文件,而从Angular 6开始,改为使用angular.json作为配置文件。配置文件包含一系列默认值和项目编译时要包含的文件。具体的配置项可以在官方文档中找到详细的解释和说明。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Angular2配置文件详解](https://blog.csdn.net/a7412605567/article/details/101697577)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【精】angular.json配置详解【angular12】](https://blog.csdn.net/wangbiao9292/article/details/124750287)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]