如何用Base64字符串打开CKEditor？求Angular的Base64 Docx查看器

一、使用Base64数据打开CKEditor #

CKEditor的data属性接收的是HTML格式内容，而非原始Base64字符串，需要先对Base64解码，再根据内容类型处理：

1. 若Base64对应HTML内容 #

直接解码后赋值给data即可，Angular组件示例：

import { Component } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-ckeditor-demo',
  template: `<ckeditor [editor]="Editor" [data]="editorData"></ckeditor>`
})
export class CkeditorDemoComponent {
  public Editor = ClassicEditor;
  public editorData: string = '';

  constructor() {
    // 替换为你的HTML Base64字符串
    const base64Html = 'PGh0bWw+PGJvZHk+SGVsbG8gQ0tlZWRvcjwvdG9wPjwvYm9keT48L2h0bWw+';
    // 解码Base64为HTML文本
    this.editorData = atob(base64Html);
  }
}

2. 若Base64对应DOCX内容 #

CKEditor本身不支持直接解析DOCX，需要先将DOCX转成HTML，可借助mammoth.js库实现：

1. 安装依赖：npm install mammoth --save
2. 组件代码示例：

import { Component } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as mammoth from 'mammoth';

@Component({
  selector: 'app-ckeditor-docx',
  template: `<ckeditor [editor]="Editor" [data]="editorData"></ckeditor>`
})
export class CkeditorDocxComponent {
  public Editor = ClassicEditor;
  public editorData: string = '';

  constructor() {
    // 替换为你的DOCX Base64字符串
    const base64Docx = '你的DOCX Base64内容';
    // 将Base64转为ArrayBuffer
    const arrayBuffer = Uint8Array.from(atob(base64Docx), c => c.charCodeAt(0)).buffer;
    // 转换DOCX为HTML
    mammoth.convertToHtml({ arrayBuffer })
      .then(result => {
        this.editorData = result.value;
      })
      .catch(err => console.error('DOCX转HTML失败:', err));
  }
}

二、Angular中支持Base64的DOCX查看器 #

推荐以下两种方案：

1. 使用ngx-doc-viewer #

支持通过Data URL加载Base64格式的DOCX，依赖第三方预览服务（如Google Docs）：

1. 安装依赖：npm install ngx-doc-viewer --save
2. 组件代码示例：

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

@Component({
  selector: 'app-docx-viewer',
  template: `<ngx-doc-viewer [url]="docxDataUrl" viewer="google" style="width: 100%; height: 800px;"></ngx-doc-viewer>`
})
export class DocxViewerComponent {
  public docxDataUrl: string = '';

  constructor() {
    // 替换为你的DOCX Base64字符串
    const base64Docx = '你的DOCX Base64内容';
    // 构建DOCX的Data URL
    this.docxDataUrl = `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${base64Docx}`;
  }
}

2. 使用docx-preview #

纯前端本地预览DOCX，无需依赖第三方服务：

1. 安装依赖：npm install docx-preview --save
2. 组件代码示例：

import { Component, ElementRef, ViewChild } from '@angular/core';
import * as docx from 'docx-preview';

@Component({
  selector: 'app-docx-preview',
  template: `<div #docxContainer style="width: 100%; min-height: 800px;"></div>`
})
export class DocxPreviewComponent {
  @ViewChild('docxContainer') docxContainer!: ElementRef;

  ngAfterViewInit() {
    // 替换为你的DOCX Base64字符串
    const base64Docx = '你的DOCX Base64内容';
    const arrayBuffer = Uint8Array.from(atob(base64Docx), c => c.charCodeAt(0)).buffer;
    // 渲染DOCX到容器
    docx.renderAsync(arrayBuffer, this.docxContainer.nativeElement);
  }
}

内容的提问来源于stack exchange，提问作者Dev55