Question

我正在使用angular2，并且想使用一个对象生成docx文件。我希望我的docx文件包含页脚，页眉，表格等。我能想到的最佳解决方案是首先创建一个HTML文件，然后将其转换为docx文件。但这似乎不对。有没有更容易，更方便的方法来做我想做的事情？这是我使用的方法：

constructor
zhu
null
derived constructor
zhu
zz
female
female

}

Answer 1

我认为

最简单的用于在前端生成文档的工具是Docx.js。我认为它可以帮助您解决问题。

在此项目中，您将使用Javascript（或打字稿）代码生成简单的HTML，并将其另存为Docx文件。像这样：

<script>
    function exportAsDoc() {
        var content = '<!DOCTYPE html>';

        var items = [
            {col1: "foo", col2: "bar"}
        ];

        content += "<html><body><table>";
        content += "<tr>";
        content += "<th>col1</th><th>col2</th>";
        content += "</tr>";

        for (var i=0; i<items.length; i++) {
            content += "<tr>";
            content += "<td>" + items[i].col1 + "</td>";
            content += "<td>" + items[i].col2 + "</td>";
            content += "</tr>";
        }
        content += "</table></body></html>";

        var converted = htmlDocx.asBlob(content, {orientation: "landscape"});
        console.log(converted);
        saveAs(converted, 'test.docx');
    }
</script>

在项目网站上，您具有使用在线编辑器的完整示例。只需按照示例操作并适应您的项目

http://evidenceprime.github.io/html-docx-js/

Answer 2

为时已晚，但是这可能对其他人有帮助。一种实现方法是使用docx.js

我添加了简单的示例，并链接到示例和文档

https://stackblitz.com/edit/angular-afvxtz

https://docx.js.org/#/

TS文件：

import { Component } from '@angular/core';
import { Packer } from 'docx';
import { saveAs } from 'file-saver/FileSaver';

import { DocumentCreator } from './cv-generator';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  public download(): void {
    const documentCreator = new DocumentCreator();
    const doc = documentCreator.create();
    doc.createParagraph("Test heading1, bold and italicized").heading1();
    doc.createParagraph("Some simple content");
    const packer = new Packer();

    packer.toBlob(doc).then(blob => {
      console.log(blob);
      saveAs(blob, "example.docx");
      console.log("Document created successfully");
    });
  }
}

cv-generator.ts文件：

import { Document, Paragraph, Packer, TextRun } from 'docx';


export class DocumentCreator {
  create() {
    const title = 'EXECUTIVE SUMMARY';
    const document = new Document();
    document.addParagraph(new Paragraph(title).title());
    document.addParagraph(this.createHeading('Exception Overview'));
    return document;
  }
  createHeading(text) {
    return new Paragraph(text).heading1().thematicBreak();
  }
}

HTML：

<button class="em-primary-button" (click)="download()">Download file</button>

使用Angular 2生成Docx文件

2 个答案: