Angular Save As Text File - Monkeywebstudio

สวัสดีครับ ในบทความวันนี้เราจะมาแนะนำ การ บันทึก ข้อความ เป็น Text File ด้วย Angular กันครับ

ไฟล์ app.component.ts

import { Component} from '@angular/core';

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

export class AppComponent{
	
	title = 'Save Text AS File';
	
	txtData:any = "วิกิพีเดียภาษาไทยเป็นเว็บไซต์สารานุกรมออนไลน์ภาษาไทยแห่งที่สองที่ถูกสร้างขึ้น[ต้องการอ้างอิง] โดยก่อนหน้านี้มีสารานุกรมไทยสำหรับเยาวชน ความต่างของวิกิพีเดียคือ เนื้อหาถูกสร้างขึ้นโดยผู้ใช้หลายคน และแจกจ่ายได้เสรีภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์ แบบแสดงที่มา-อนุญาตแบบเดียวกัน 3.0 และสัญญาอนุญาตเอกสารเสรีของกนู ในขณะที่สารานุกรมไทยสำหรับเยาวชนสงวนลิขสิทธิ์ภายใต้สัญญาอนุญาตไม่เสรี";

	constructor() { }
	
	saveAsTextFile(){
      
      var data = new Blob([this.txtData], {type: 'text/plain'});

      let url = window.URL.createObjectURL(data);

      let a = document.createElement('a');
      document.body.appendChild(a);

      a.setAttribute('style', 'display: none');
      a.href = url;
      a.download = 'news.txt';
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();

    }
  

  
}

import { Component} from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent{

title = 'Save Text AS File';

txtData:any = "วิกิพีเดียภาษาไทยเป็นเว็บไซต์สารานุกรมออนไลน์ภาษาไทยแห่งที่สองที่ถูกสร้างขึ้น[ต้องการอ้างอิง] โดยก่อนหน้านี้มีสารานุกรมไทยสำหรับเยาวชน ความต่างของวิกิพีเดียคือ เนื้อหาถูกสร้างขึ้นโดยผู้ใช้หลายคน และแจกจ่ายได้เสรีภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์ แบบแสดงที่มา-อนุญาตแบบเดียวกัน 3.0 และสัญญาอนุญาตเอกสารเสรีของกนู ในขณะที่สารานุกรมไทยสำหรับเยาวชนสงวนลิขสิทธิ์ภายใต้สัญญาอนุญาตไม่เสรี";

constructor() { }

saveAsTextFile(){

var data = new Blob([this.txtData], {type: 'text/plain'});

let url = window.URL.createObjectURL(data);

let a = document.createElement('a');

document.body.appendChild(a);

a.setAttribute('style', 'display: none');

a.href = url;

a.download = 'news.txt';

a.click();

window.URL.revokeObjectURL(url);

a.remove();

}

ไฟล์ app.component.html

<h4>ตัวอย่างข้อความ</h4>
<p>{{txtData}}</p>

<a href="#" (click)="saveAsTextFile()" style="">Save AS Text File</a>

<h4>ตัวอย่างข้อความ</h4>

<p>{{txtData}}</p>

ผลการทำงาน เมื่อคลิกที่ Save AS Text File จะ Download ไฟล์ text ตามตัวอย่าง

Popular Posts