HTML sang từ góc cạnh

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

APIDescriptionDefault ValueTypepromptĐể ​​gọi hộp thoại nhắc với các tùy chọn dán khi dán nội dung trong trình chỉnh sửa. falsebooleanplainTextĐể dán nội dung dưới dạng văn bản thuần túy. falsebooleankeepFormatĐể giữ nguyên định dạng với nội dung đã sao chép. truebooleandeniedTagsĐể bỏ qua các thẻ khi dán nội dung HTML. nullstring[]deniedAttrsĐể dán nội dung bằng cách lọc ra các thuộc tính này khỏi nội dung. nullstring[]allowedStylePropsĐể dán nội dung bằng cách chấp nhận các thuộc tính kiểu này và xóa các thuộc tính kiểu khác. ['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'

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 .doc

3

Hộp thoại nhắc

Khi

Export as .doc

4 đượ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 .doc

5,

Export as .doc

6 và

Export as .doc

7 dưới dạng nút radio

1. Export as .doc
   

   5. Nút radio để giữ nguyên định dạng với nội dung được sao chép

2. Export 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ép

3. Export 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 .doc

4 đượ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ửa

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 { }

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 dung

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ửa

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 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ửa

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 { }

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 false

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ụ,

1. 30. Dán nội dung bằng cách lọc ra các thẻ neo

2. 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’

3. 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ó

Làm cách nào để chuyển đổi HTML sang Word bằng JavaScript?

Word có thể chuyển đổi HTML thành văn bản không?

Làm cách nào để hiển thị tệp docx ở góc?

Làm cách nào để chuyển đổi HTML sang DOCX trong C#?