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

ใน Angular เราสามารถดาวน์โหลดไฟล์ได้โดยใช้ HttpClient หรือ FileSaver library

การใช้ HttpClient

ในการดาวน์โหลดไฟล์โดยใช้ HttpClient เราต้องส่ง HTTP GET request ไปยัง URL ของไฟล์ จากนั้นสร้าง Blob จากข้อมูลไฟล์ และสร้าง Anchor element ด้วย download attribute ที่กำหนดชื่อไฟล์

ตัวอย่างโค้ด:

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>

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

การใช้ FileSaver library

ในการดาวน์โหลดไฟล์โดยใช้ FileSaver library เราต้องสร้าง Blob จากข้อมูลไฟล์ จากนั้นเรียกใช้ saveAs() method ของ 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>

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

เคล็ดลับในการดาวน์โหลดไฟล์

• เราสามารถตรวจสอบประเภทไฟล์ของไฟล์ที่จะดาวน์โหลดได้โดยใช้ type property ของ Blob
• เราสามารถใช้ FileSaver.readAs() method เพื่ออ่านไฟล์จาก URL ก่อนดาวน์โหลด
• เราสามารถใช้ FileSaver.save() method เพื่อบันทึกไฟล์ลงในตำแหน่งที่กำหนด

ตัวอย่างโค้ดเพิ่มเติม

ตัวอย่างโค้ดต่อไปนี้แสดงให้เห็นวิธีดาวน์โหลดไฟล์จาก URL ที่กำหนด:

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

@Component({
  selector: 'my-app',
  templateUrl: './app