tiktok นับยอดวิวยังไง

ในการ download file ใน Angular เราสามารถใช้บริการ HttpClient ของ Angular ได้

HttpClient เป็นคลาสที่ช่วยให้เราสามารถส่งและรับ HTTP requests ได้ โดยเราสามารถใช้ get() method ของ HttpClient เพื่อส่ง HTTP GET request เพื่อดึงไฟล์จากเซิร์ฟเวอร์

ตัวอย่างการ download file ใน Angular

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Angular Download File';
  file = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Get the file
    this.http.get('/api/file')
      .subscribe(
        response => {
          // Get the file data
          this.file = response.data;
        },
        error => {
          // Handle the error
          console.log(error);
        }
      );
  }

  downloadFile() {
    // Create a blob from the file data
    const blob = new Blob([this.file], { type: 'application/pdf' });

    // Create an anchor element with the download attribute
    const anchor = document.createElement('a');
    anchor.href = window.URL.createObjectURL(blob);
    anchor.download = 'my-file.pdf';

    // Append the anchor element to the document body
    document.body.appendChild(anchor);

    // Click the anchor element to download the file
    anchor.click();
  }

}

โค้ด HTML

<h1>{{ title }}</h1>
<button (click)="downloadFile()">Download File</button>

Output

เมื่อเราเรียกใช้แอปพลิเคชัน Angular ครั้งแรก จะมีข้อความ “Angular Download File” ปรากฏขึ้น

เมื่อเราคลิกลิงก์ “Download File” แอปพลิเคชันจะส่ง HTTP GET request ไปยัง URL /api/file เพื่อดึงไฟล์ PDF จากเซิร์ฟเวอร์

เมื่อได้รับ response จากเซิร์ฟเวอร์ แอปพลิเคชันจะสร้าง blob จากไฟล์ PDF และสร้าง anchor element ด้วย attribute download ที่กำหนดชื่อไฟล์ PDF

เมื่อเราคลิกลิงก์ “Download File” แอปพลิเคชันจะดาวน์โหลดไฟล์ PDF ไปยังเครื่องของเรา

วิธีอื่นในการ download file ใน Angular

นอกจากการใช้ HttpClient แล้ว เรายังสามารถใช้ FileSaver library เพื่อ download file ได้

FileSaver library เป็น library ที่ช่วยให้เราสามารถบันทึกไฟล์ลงเครื่องของเราได้

ตัวอย่างการ download file ใน Angular โดยใช้ FileSaver library

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FileSaver } from 'file-saver';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Angular Download File';
  file = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Get the file
    this.http.get('/api/file')
      .subscribe(
        response => {
          // Get the file data
          this.file = response.data;
        },
        error => {
          // Handle the error
          console.log(error);
        }
      );
  }

  downloadFile() {
    // Create a blob from the file data
    const blob = new Blob([this.file], { type: 'application/pdf' });

    // Save the file
    FileSaver.saveAs(blob, 'my-file.pdf');
  }

}

โค้ด HTML

<h1>{{ title }}</h1>
<button (click)="downloadFile()">Download File</button>

Output

ผลลัพธ์จะเหมือนกับตัวอย่างก่อนหน้านี้