typescript - Använda Angular 2 för att generera Docx-filer

Jag använder angular2 och jag vill generera en docx-fil med hjälp av ett objekt. Jag vill att min docx-fil ska innehålla sidhuvuden, sidfötter, tabeller etc. Den bästa lösningen jag kan komma på är först att skapa en HTML-fil och sedan konvertera den till en docx-fil. Men det verkar inte rätt. Finns det ett enklare och mer bekvämt sätt att göra det jag vill göra? Här är metoden jag använder:

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

}

Svar #1

För sent för svaret men detta kan vara hjälpsamt för någon annan. Ett sätt att implementera detta är att använda docx.js

Jag har lagt till ett enkelt exempel och en länk till exemplet och dokumentationen

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

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

TS-fil:

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 fil:

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>

Svar #2

Enligt min åsikt är det enklaste verktyget att arbeta med för att generera dokument på frontenden Docx.js. Jag tror att det kan hjälpa dig att lösa ditt problem.

I detta projekt genererar du en enkel HTML med hjälp av Javascript (eller TypeScript) kod, och sparar som en Docx-fil. Något liknande detta:

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

På projektets webbplats finns ett komplett exempel som använder en online-redigerare. Följ bara exemplet och anpassa det till ditt projekt

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

Relaterade artiklar