Nói chung, tính năng xuất được sử dụng để tải xuống nội dung trang web dưới dạng tệp và lưu nó để sử dụng ngoại tuyến. Microsoft Word hoặc Doc [. doc] là lý tưởng để xuất nội dung HTML trong một tệp. Có thể dễ dàng triển khai chức năng xuất sang tài liệu trên ứng dụng web mà không cần tương tác phía máy chủ. Có một giải pháp phía máy khách để xuất HTML sang tài liệu từ bằng JavaScript
Chức năng xuất sang tài liệu phía máy khách làm cho ứng dụng web trở nên thân thiện với người dùng. Người dùng có thể xuất một phần cụ thể của nội dung trang web mà không cần làm mới trang. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách xuất HTML sang tài liệu bằng JavaScript. Chức năng xuất JavaScript có thể được sử dụng để tải xuống nội dung trang web hoặc nội dung div cụ thể trong tệp doc/docx
Mã ví dụ chuyển đổi nội dung HTML thành tài liệu Microsoft Word và nó có thể được lưu dưới dạng. tập tin tài liệu
Mã JavaScript.
Hàm
9 chuyển đổi nội dung HTML thành từ hoặc xuất một phần cụ thể của trang web có hình ảnh và tải xuống dưới dạng tệp Doc [. tài liệu].
Export as .doc
0 – Bắt buộc. Chỉ định ID phần tử để xuất nội dung từExport as .doc
1 – Tùy chọn. Chỉ định tên tệp của tài liệu từ
function Export2Word[element, filename = '']{ var preHtml = "Export HTML To Doc"; var postHtml = ""; var html = preHtml+document.getElementById[element].innerHTML+postHtml; var blob = new Blob[['\ufeff', html], { type: 'application/msword' }]; // Specify link url var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent[html]; // Specify file name filename = filename?filename+'.doc':'document.doc'; // Create download link element var downloadLink = document.createElement["a"]; document.body.appendChild[downloadLink]; if[navigator.msSaveOrOpenBlob ]{ navigator.msSaveOrOpenBlob[blob, filename]; }else{ // Create a link to the file downloadLink.href = url; // Setting the file name downloadLink.download = filename; //triggering the function downloadLink.click[]; } document.body.removeChild[downloadLink]; }
Xuất dữ liệu bảng HTML sang Excel bằng JavaScript
Nội dung HTML.
Gói nội dung HTML trong vùng chứa mà bạn muốn xuất sang tài liệu MS Word [. tài liệu].
Kích hoạt chức năng
9 để xuất nội dung HTML dưới dạng. tệp doc sử dụng JavaScript
Export as .doc
Nếu bạn muốn xuất HTML với tên tệp tùy chỉnh, hãy chuyển tên tệp bạn muốn vào hàm Export2Word[]
Export as .doc
Theo mặc định, tệp từ sẽ được lưu dưới dạng. tập tin tài liệu. Nếu bạn muốn xuất file word dưới dạng. docx, chỉ định phần mở rộng trong tên tệp
Export as .docx
Xuất nội dung TinyMCE sang tài liệu MS Word
Phần kết luận
Mã ví dụ của chúng tôi giúp bạn tích hợp chức năng xuất sang tài liệu bằng JavaScript mà không cần bất kỳ plugin jQuery của bên thứ ba nào. Không chỉ. doc nhưng bạn cũng có thể xuất nội dung HTML dưới dạng. docx bằng cách chỉ định phần mở rộng. Ngoài ra, bạn có thể dễ dàng mở rộng chức năng xuất sang tập lệnh từ theo nhu cầu của mình
Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?
ValueDes mô tảDemonormalXác định khoảng cách bình thường giữa các từ [0. 25em]. Đây là defaultDemo ❯lengthXác định khoảng trắng bổ sung giữa các từ [bằng px, pt, cm, em, v.v.]. Cho phép giá trị âm. Đọc về đơn vị độ dàiDemo ❯initialĐặt thuộc tính này thành giá trị mặc định. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Rich Text Editor cho phép bạn giảm bớt công sức khi chuyển đổi nội dung Microsoft Word sang định dạng HTML với định dạng và kiểu dáng
MS Word sang HTML
Theo mặc định, Rich Text Editor xem xét các quy trình sau khi dán nội dung từ Microsoft Word
danh sách chuyển đổi. Các phần tử danh sách được sao chép từ tài liệu Microsoft Word chứa các thẻ đoạn văn có kiểu và lớp. Các phần tử danh sách được chuyển đổi thành các phần tử danh sách HTML tiêu chuẩn bằng cách tham chiếu các kiểu và tên lớp trong các thẻ đoạn văn
chuyển đổi phong cách. Kiểu của các thành phần được sao chép từ tài liệu Microsoft Word được chuyển đổi thành kiểu CSS tiêu chuẩn và được thêm dưới dạng kiểu nội tuyến cho từng thành phần tương ứng
Thẻ và nhận xét. Nhận xét và thẻ XML cụ thể của Microsoft Word bị xóa khi dọn dẹp khi dán
Dán dọn dẹp
Bạn có thể kiểm soát định dạng và kiểu khi dán nội dung vào trình chỉnh sửa bằng thuộc tính cài đặt pasteCleanup. Các cài đặt sau đây khả dụng để dọn sạch nội dung
Các tính năng của Rich Text Editor được tách biệt thành các mô-đun tính năng riêng lẻ. Để sử dụng tính năng dọn dẹp dán, hãy thêm mô-đun dọn dẹp dán bằng cách sử dụng
Export as .doc3
Hộp thoại nhắc
Khi
Export as .doc4 được đặt thành true, việc dán nội dung vào trình chỉnh sửa sẽ mở hộp thoại chứa ba tùy chọn
Export as .doc5,
Export as .doc6 và
Export as .doc7 dưới dạng nút radio
Export as .doc
5. Nút radio để giữ nguyên định dạng với nội dung được sao chépExport as .doc
6. Nút radio để xóa tất cả các định dạng kiểu có nội dung được sao chépExport as .doc
7. Nút radio để dán nội dung đã sao chép dưới dạng văn bản thuần túy mà không có bất kỳ định dạng hoặc kiểu dáng nào [bao gồm cả việc xóa tất cả các thẻ]
Khi giá trị
Export as .doc4 được đặt thành true, thuộc tính API plainText và keepFormat sẽ không được xem xét để xử lý khi dán nội dung
Dán dưới dạng văn bản gốc
Khi
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule[{
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}]
export class AppModule { }
2 được đặt thành true, nội dung được sao chép sẽ được chuyển đổi thành văn bản thuần túy bằng cách xóa tất cả các thẻ và kiểu HTML được áp dụng cho nội dung đó và chỉ có văn bản thuần túy được dán vào trình chỉnh sửaKhi giá trị
2 được đặt thành true, lời nhắc thuộc tính API sẽ được đặt thành false và keepFormat sẽ không được xem xét để xử lý khi dán nội dungimport { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'; import { AppComponent } from './app.component'; /** * Module */ @NgModule[{ imports: [ BrowserModule, RichTextEditorAllModule ], declarations: [AppComponent], bootstrap: [AppComponent] }] export class AppModule { }
Giữ định dạng
Khi
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule[{
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}]
export class AppModule { }
4 được đặt thành true, nội dung được sao chép sẽ duy trì tất cả định dạng kiểu được phép trong import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule[{
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}]
export class AppModule { }
5 khi dán nội dung vào trình chỉnh sửaKhi
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule[{
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}]
export class AppModule { }
4 được đặt thành false, kiểu trong nội dung được sao chép sẽ bị xóa mà không xem xét các kiểu được phép trong import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule[{
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}]
export class AppModule { }
5 khi dán nội dung vào trình chỉnh sửaKhi giá trị
4 được đặt thành true, dấu nhắc thuộc tính API và văn bản gốc phải được đặt thành falseimport { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'; import { AppComponent } from './app.component'; /** * Module */ @NgModule[{ imports: [ BrowserModule, RichTextEditorAllModule ], declarations: [AppComponent], bootstrap: [AppComponent] }] export class AppModule { }
Thẻ bị từ chối
Khi giá trị
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule[{
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}]
export class AppModule { }
9 được đặt, các thẻ khớp với danh sách 'thẻ bị từ chối' sẽ bị xóa khi dán nội dung đã sao chép vào trình chỉnh sửa. Ví dụ,
30. Dán nội dung bằng cách lọc ra các thẻ neo
31. Dán nội dung bằng cách lọc ra các thẻ neo không có thuộc tính ‘href’
32. Dán nội dung bằng cách lọc ra các thẻ neo có thuộc tính 'href' và 'mục tiêu'
thuộc tính bị từ chối
Khi các giá trị
33 được đặt, các thuộc tính khớp với danh sách 'thuộc tính bị từ chối' sẽ bị xóa khi dán nội dung đã sao chép vào trình chỉnh sửa. Ví dụ,
34. Thao tác này sẽ xóa thuộc tính 'id' và 'title' khỏi tất cả các thẻ
Thuộc tính kiểu được phép
Theo mặc định, các kiểu cơ bản sau đây được phép dán nội dung vào trình chỉnh sửa
['nền', 'màu nền', 'đường viền', 'đường viền dưới', 'đường viền bên trái', 'bán kính đường viền', 'đường viền bên phải', 'kiểu đường viền', 'đường viền trên cùng'
Khi bạn định cấu hình allowStyleProps, các kiểu phù hợp với danh sách 'thuộc tính kiểu được phép' sẽ được cho phép, tất cả các thuộc tính kiểu khác sẽ bị xóa khi dán nội dung vào trình chỉnh sửa
Ví dụ,
35. Điều này sẽ chỉ cho phép các thuộc tính kiểu 'màu' và 'lề' trong mỗi phần tử đã dán
Trong ví dụ sau, cài đặt liên quan đến dọn dẹp dán được giải thích với cấu hình mô-đun của nó