在 Angular 中提供文件下载

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

Vue React JavaScript Angular CSS HTML

在 Angular 中提供文件下载

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

无知的幸福是当你想要下载一个文件时，你登录到一个网站，搜索文件，找到它，点击下载，然后你就完成了，而不知道在那个网站上提供这些文件以供下载的背后的任务和努力地点。对于 Web 开发人员来说，提供文件下载可能是一项让您羡慕这些无辜用户的任务。

但是我们如何使用 Angular 框架提供文件供下载呢？让我们考虑一些方法。

使用 Angular 提供 .txt 文件以供下载

这里的第一种方法是将文本转换为 .txt 格式并提供下载。要提供文件下载，我们需要使用 blob，这是一种用于直接向浏览器提供文档的虚拟存储。

首先要做的是启动一个新的 Angular 项目。然后在 app.component.html 文件中，我们将输入以下代码：

代码片段- app.component.html ：

<a [href]="fileUrl" download="file.txt">DownloadFile</a>

这将创建网页结构和将被单击以进行下载的链接。

然后我们需要为应用程序创建功能和行为。我们将在 app.component.ts 文件中执行此操作，如下所示：

代码片段- app.component.ts：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'done';
  fileUrl;
  constructor(private sanitizer: DomSanitizer) {  }
  ngOnInit() {
    const data = 'some text';
    const blob = new Blob([data], { type: 'application/octet-stream' });
    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
  }
}

我们首先定义我们希望保存的数据；它是一个文本，一些文本。然后我们定义 Blob 函数并在函数内部声明我们要保存的数据。

我们将使用 DomSanitizer 模块来使我们提供下载的文件能够通过 Angular 的安全测试。然后我们转到 app.module.ts 文件以导入我们用于创建应用程序的模块。

代码片段- app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular txt File for Download

使用 ngx-filesaver 提供下载文件

现在让我们看看如何使用 Angular 中的 ngx 依赖项来提供文件以供下载。 ngx-filesaver 是一个安全且流行的包，它提供了一种简单的方法来提供文件以供下载。

可以通过在新创建的项目文件夹的目录中键入 npm i ngx-filesaver 来安装 ngx-filesaver。

接下来，我们将导航到 app.component.html 文件并编写这些代码来创建 Web 应用程序的结构。

代码片段- app.component.html：

<h1></h1>
<textarea [(ngModel)]="text"></textarea>
<button type="button" (click)="onDown()">Save Text</button>

在这里，我们创建了一个带有 onDown 事件侦听器的按钮，以便在单击该按钮时下载我们提供的文件。

现在我们必须在 app.component.ts 文件中做真正的工作，如下所示：

代码片段- app.component.ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FileSaverService } from 'ngx-filesaver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  title = 'loginfive';
  public text = 'hello';
  constructor(
    private _httpClient: HttpClient,
    private _FileSaverService: FileSaverService
  ) {}

  ngOnInit() {}

  onDown() {
    const fileName = `save.txt`;
    const fileType = this._FileSaverService.genType(fileName);
    const txtBlob = new Blob([this.text], { type: fileType });
    this._FileSaverService.save(txtBlob, fileName);
    }
}

您会注意到在 app.component.ts 文件中，我们在按钮标签内声明了 onDown 事件侦听器。在这里，我们为它定义了函数。

首先，我们声明了将提供下载的数据；这是一个文本文件。然后我们利用 blob 提供文件以在浏览器上下载。

这种方法的最后一部分是导入我们用于开发网络应用程序的模块。

代码片段- app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { FileSaverModule } from 'ngx-filesaver';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule,
    FormsModule,
    HttpClientModule,
    FileSaverModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

输出:

Angular File for Download Using ngx-filesaver

使用 Angular 提供 .jpg 文件以供下载

到目前为止，我们一直在研究如何提供 .txt 文件以供下载。现在让我们看看如何提供图片以供下载。

我们将从一个 URL 中获取图片，下载将显示一个由 Angular Material 提供的进度条。

我们应该首先创建一个新的 Angular 项目并安装 Angular Material 包，导航到项目文件夹并键入：ng add @*angular/material 。

安装成功后，我们将转到 app.component.html 文件来创建页面结构以包含下载进度幻灯片。

代码片段- app.component.html：

<mat-card>
    <div class="file">
        <p>{{ slides.name }}</p>
        <button (click)="download(slides)" mat-raised-button color="primary">Download</button>
    </div>
    <mat-progress-bar *ngIf="download$ | async as download"
        [mode]="download.state == 'PENDING' ? 'buffer' : 'determinate'"
    [value]="download.progress">
    </mat-progress-bar>
</mat-card>

我们需要创建一个组件，我们将在其中处理代码以观察下载进度，激活材料幻灯片。我们将创建一个文件，将其命名为 download.ts，并在其中运行这些代码。

代码片段 - download.ts：

import {
    HttpEvent,
    HttpEventType,
    HttpProgressEvent,
    HttpResponse
  } from "@angular/common/http";
  import { Observable } from "rxjs";
  import { distinctUntilChanged, scan, map, tap } from "rxjs/operators";

  function isHttpResponse<T>(event: HttpEvent<T>): event is HttpResponse<T> {
    return event.type === HttpEventType.Response;
  }

  function isHttpProgressEvent(
    event: HttpEvent<unknown>
  ): event is HttpProgressEvent {
    return (
      event.type === HttpEventType.DownloadProgress ||
      event.type === HttpEventType.UploadProgress
    );
  }

  export interface Download {
    content: Blob | any;
    progress: number;
    state: "PENDING" | "IN_PROGRESS" | "DONE";
  }

  export function download(
    saver?: (b: Blob) => void
  ): (source: Observable<HttpEvent<Blob>>) => Observable<Download> {
    return (source: Observable<HttpEvent<Blob>>) =>
      source.pipe(
        scan(
          (download: Download, event): Download => {
            if (isHttpProgressEvent(event)) {
              return {
                progress: event.total
                  ? Math.round((100 * event.loaded) / event.total)
                  : download.progress,
                state: "IN_PROGRESS",
                content: null
              };
            }
            if (isHttpResponse(event)) {
              if (saver) {
                saver(event.body);
              }
              return {
                progress: 100,
                state: "DONE",
                content: event.body
              };
            }
            return download;
          },
          { state: "PENDING", progress: 0, content: null }
        ),
        distinctUntilChanged((a, b) => a.state === b.state
          && a.progress === b.progress
          && a.content === b.content
        )
      );
  }

由于我们需要观察我们为下载服务的文件的下载进度，所以我们使用 Observable 函数来监测下载进度，然后将其转化为素材滑块。接下来是创建一个服务文件，该文件将处理从 URL 中获取的文件，然后将其与进度幻灯片一起显示。

让我们创建一个服务文件，将其命名为 download.service.ts，并键入以下代码：

代码片段 - download.service.ts：

import { Injectable, Inject } from '@angular/core'
import { HttpClient, HttpRequest } from '@angular/common/http'
import { download, Download } from './download'
import { map } from 'rxjs/operators'
import { Observable } from 'rxjs'
import { SAVER, Saver } from './saver.provider'

@Injectable({providedIn: 'root'})
export class DownloadService {

  constructor(
    private http: HttpClient,
    @Inject(SAVER) private save: Saver
  ) {
  }

  download(url: string, filename?: string): Observable<Download> {
    return this.http.get(url, {
      reportProgress: true,
      observe: 'events',
      responseType: 'blob'
    }).pipe(download(blob => this.save(blob, filename)))
  }

  blob(url: string, filename?: string): Observable<Blob> {
    return this.http.get(url, {
      responseType: 'blob'
    })
  }
}

为了向我们的应用程序提供这些服务，我们需要一个提供者，创建一个新文件，将其命名为 saver.provider.ts，并将代码放入其中。

代码片段- saver.provider.ts：

import {InjectionToken} from '@angular/core'
import { saveAs } from 'file-saver';

export type Saver = (blob: Blob, filename?: string) => void
export const SAVER = new InjectionToken<Saver>('saver')
export function getSaver(): Saver {
  return saveAs;
}

接下来是获取我们要提供下载的图片的 URL。我们将在 app.component.ts 文件中执行此操作并键入这些代码。

代码片段- app.component.ts：

import { Component, Inject } from '@angular/core';
import { DownloadService } from './download.service'
import { Download } from './download'
import { Observable } from 'rxjs'
import { tap } from 'rxjs/operators'
import { DOCUMENT } from '@angular/common'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'done';
  slides =
    {name: 'Click here:', url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg'}
  download$: Observable<Download>

  constructor(private downloads: DownloadService,
              @Inject(DOCUMENT) private document: Document) {}

  download({name, url}: {name: string, url: string}) {
    this.download$ = this.downloads.download(url, name)
  }
}

我们需要大量的模块来运行应用程序。我们需要将这些模块导入到 app.module.ts 文件中。

代码片段- app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'
import {MatButtonModule} from '@angular/material/button';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatCardModule} from '@angular/material/card';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { AppComponent } from './app.component';
import { SAVER, getSaver } from './saver.provider'

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    MatProgressBarModule,
    MatCardModule
  ],
  providers: [{provide: SAVER, useFactory: getSaver}],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

然后我们需要用一些样式来美化页面。我们将在 app.component.css 文件中添加这个小片段。

代码片段 - app.component.css：

mat-card {
    display: flex;
    flex-direction: column;
  }

  .file {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

输出:

Angular jpg File for Download

总结

根据我们想要提供下载的文件，我们可以采用多种方法在我们的 Angular 应用程序中实现这一点，使用 Angular blob 来保存文件。

上一篇：AngularJS 中的 getElementById 和 querySelector

下一篇：AngularJs 中的 scrollTo 函数

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

本文地址：

迹忆客专注技术分享