Реализуйте веб-боковое слово «Импорт шаблона» и рендеринга данных Экспорт

GitHub

задний план

Возникла потребность в работе, которая требует от пользователя самостоятельно создать шаблон слова, загрузить его на веб-страницу, а затем отрендерить наши данные в соответствующее слову место и экспортировать их.

После долгого переворачивания гитхаб решил реализовать его со следующими технологиями:

  2. GitHub.com/open-XML-спецификация…
  3. Использование FileSaver для локального сохранения данных документаGitHub.com/Eli GRE собирается/FI…

одна из самых простых реализаций

Docxtemplater может получать переменные, обернутые специальными символами (такими как '{}') в импортированных словарных данных, и присваивать им значения, тем самым реализуя присвоение шаблонов.

Ниже приведена простая реализация с угловой:

import { Component } from '@angular/core';
import * as docxtemplater from 'docxtemplater';
import * as inspect from 'docxtemplater/js/inspect-module';
import * as PizZip from 'pizzip';
import * as pizzipUtils from 'pizzip/utils';
import * as FileSaver from 'file-saver';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  // 加载文件
  loadFile(url, callback) {
    pizzipUtils.getBinaryContent(url, callback); // 将文件加载成二进制文件
  }

  generate() {
      this.loadFile('../assets/test.docx', function(error, content) {

          if (error) { throw error; }
          const zip = PizZip(content); // 将内容转化PizZip对象

          const doc = new docxtemplater().loadZip(zip); // 获得templater对象

          // 对word中的变量进行赋值
          doc.setData({
            title: '模板测试',
            anthor: 'elc',
            time: '2019-10-2',
            content: `docxtemplater is a mail merging tool that is used programmatically and handles conditions,
            loops, and can be extended to insert anything (tables, html, images).`
          });
          try {
            doc.render(); // 将赋值渲染到word数据中
          } catch (error) {
              const e = {
                  message: error.message,
                  name: error.name,
                  stack: error.stack,
                  properties: error.properties,
              };
              console.log(JSON.stringify({error: e}));
              throw error;
          }
          // 生成输出数据，数据类型为FileSaver插件可以识别的blob类型,还可以生成string, base64, uint8array, arraybuffer类型
          console.log(doc.getZip().generate)
          const out = doc.getZip().generate({
            type: 'blob'
          });
          FileSaver.saveAs(out, 'output.docx'); // 保存，并输出
      });
  }
}

Вот шаблон входящего файла:

Вот результат экспорта файла:

Импорт данных цикла

Шаблоны, импортирующие циклические данные, заключаются в символы {#} и {/}. Например:

 doc.setData({
    heros: [
      {
        heroName: 'Lina',
        heroCamp: 'radiant',
        heroEquipment: 'drogon'
      },
      {
        heroName: 'Earth Shocker',
        heroCamp: 'radiant',
        heroEquipment: 'blink dragger'
      },
      {
        heroName: 'Lion',
        heroCamp: 'Dire',
        heroEquipment: 'drogon'
      }
    ]
    });

Такой цикл можно использовать в таблице

doc.setData({
    heroTable: [
      {
        hero_name: 'Lina',
        hero_camp: 'radiant',
        hero_equipment: 'drogon'
      },
      {
        hero_name: 'Earth Shocker',
        hero_camp: 'radiant',
        hero_equipment: 'blink dragger'
      },
      {
        hero_name: 'Lion',
        hero_camp: 'Dire',
        hero_equipment: 'drogon'
      },
    ]
  });

Импорт данных по условию

Переменные, начинающиеся с #, могут добавлять условия для управления импортом, а {/} может представлять различные условия или управлять ими. Однако этот метод требует импорта плагина синтаксического анализа angular и настройки используемого шаблона. Например:

 doc.setData({
            users: [
              {
                name: 'John'
              },
              {
                name: 'Mary'
              },
              {
                name: 'Jane'
              },
              {
                name: 'Sean'
              }
            ]
          });

резюме

Благодаря базовому использованию и циклическим данным практически любой шаблон можно создать с самого начала. Официальный также предоставляет несколько более удобных плагинов, таких как таблица, html, сетка и т. Д., Но требуется оплата. . .

Яма, на которую легко наступить, пробелы не допускаются в словесном шаблоне {title} и {title} две переменные.

Чтобы динамически получать переменные шаблона, вам нужно импортировать модуль проверки для анализа данных:

import * as inspect from 'docxtemplater/js/inspect-module';


getTages(doc: docxtemplater) {
    const iModule = inspect();
    doc.attachModule(iModule);
    doc.render();
    const tags = iModule.getAllTags();
    console.log(tags);
    return tags;
  }

См. документацию для других более подробных материалов.шаблон docx R.читать документ S.IO/en/latest/i…

Категории