使用 Angular 2 生成 Docx 文件

Question

使用 Angular 2 生成 Docx 文件

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

exportAsDoc() {

const preHtml = '<html xmlns:o=\'urn:schemas-microsoft-com:office:office\' ' + '' +
        ' xmlns:w=\'urn:schemas-microsoft-com:office:word\' xmlns=\'http://www.w3.org/TR/REC-html40\'><head><meta charset=\'utf-8\'>' +
        '<title>Export HTML To Doc</title></head><body>';
const postHtml = '</body></html>';

let innerHtml = '';
// Specify file name
const filename = this.respSheet.title + '.doc';
const respSheetKpis = this.respSheet.sheet_kpis;
respSheetKpis.forEach(x => {
  const footer = '<p style="text-align: center">' + x.kpi.name + ' - ' + x.kpiValue + '</p>';
  innerHtml += footer;
  x.sheet_kpi_dimensions.forEach(dimension => {
    if (dimension.dimension !== undefined) innerHtml += dimension.dimension.name;
    let table = '<table>\n' +
            '  <tr>\n' +
            '    <th>Istatistik adi</th>\n' +
            '    <th>Degeri</th> \n' +
            '  </tr>\n';
    const data = dimension.data;
    if (data !== undefined) {
      for ( let i = 0 ; i < data.length ; i ++ ) {
        table += ' <tr>\n' +
                '    <th>' + data[ i ].title + '</th>\n' +
                '    <th>' + data[ i ].value + '</th> \n' +
                '  </tr>\n';
      }
      table += '</table>';
      innerHtml += table;
    }
  })
});
const html = preHtml + innerHtml + postHtml;

const blob = new Blob(['\ufeff', html], {
  type: 'application/msword'
});

// Specify link url
const url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);

// Create download link element
const 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);

Run Code Online (Sandbox Code Playgroud)

}

Answer 1

Asi*_*ani 5

回复太晚了，但这可能对其他人有帮助。实现这一点的一种方法是使用 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");
    });
  }
}

Run Code Online (Sandbox Code Playgroud)

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();
  }
}

Run Code Online (Sandbox Code Playgroud)

HTML：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，4 月前
查看次数：	10694 次
最近记录：	6 年，5 月前