Как работать с документами Word во внешнем интерфейсе

JavaScript HTML
Как работать с документами Word во внешнем интерфейсе

В своей повседневной работе большинство людей используют программы обработки текстов, такие как Microsoft Office Word, WPS или macOS Pages, для обработки документов Word. Есть ли другой способ обработки документов Word, кроме использования программ обработки текстов, упомянутых выше? Ответ положительный.

Далее брат Абао расскажет, как работать с документами Word во внешнем интерфейсе.Прочитав эту статью, вы узнаете следующее:

  • Форматы файлов, поддерживаемые Microsoft Office Word, и характеристики документов Docx;
  • Как преобразовать документы Word в документы HTML;
  • Как работать с ZIP-архивами в браузере;
  • Как преобразовать документы Word в документы Markdown;
  • Как динамически генерировать документ Word на внешнем интерфейсе.

Прочитайте последние популярные статьи брата А Бао (спасибо за вашу поддержку и поддержку 🌹🌹🌹):

Вы, ребята, готовы?"Совершите экскурсию по документу Word"Это на, Поехали!

1. Введение в Microsoft Office Word

Microsoft Office Word — это текстовый процессор от Microsoft Corporation. Первоначально он был написан Ричардом Броди в 1983 году для компьютера IBM под управлением DOS. Последующие версии работали на Apple Macintosh (1984 г.), SCO UNIX и Microsoft Windows (1989 г.) и стали частью Microsoft Office.

Word предоставляет пользователям инструменты для создания профессиональных и элегантных документов, помогая пользователям экономить время и получать элегантные и красивые результаты. Microsoft Office Word — самая популярная программа для обработки текстов всех времен.

1.1 Форматы файлов, поддерживаемые Word

В следующей таблице перечислены несколько распространенных форматов файлов, поддерживаемых Word, отсортированные в алфавитном порядке по расширению.

Список всех поддерживаемых форматов в Word см. на веб-сайте Microsoft.office-file-format-referenceонлайн-документация. В настоящее время все более подвержены влиянию имени расширения..docx, так что это главный герой этой статьи.

1.2 Документация Docx

Как говорится, «Познай себя, познай врага и выиграй сто битв», давайте бросим беглый взгляд перед тем, как «играть»."docx"документация."Суффикс имени файла старой версии 97-2003 — .doc, а имя файла после 2007 — .docx.". Формат docx — это сжатый документ, который меньше по размеру, может обрабатывать более сложное содержимое и быстрее доступен.

Фактически"docx"Документ представляет собой сжатый файл (формат ZIP). Формат файла ZIP — это формат файлов для сжатия данных и хранения документов, ранее известный как Deflate, изобретенный Филом Кацем, объявившим об этом формате в январе 1989 года. ZIP обычно использует суффикс «.zip», а его формат MIME"application/zip".

Здесь брат А. Бао заранее подготовил изображение, содержащее аватар брата А. Бао и некоторый текст."abao.docx"документ, затем сделайте копию и переименуйте его как"abao.zip", а затем распакуйте его с помощью программного обеспечения для сжатия/распаковки ZIP.

Изучив распакованный каталог, мы обнаружили, что документ Word состоит из ряда XML-файлов и мультимедийных файлов,"abao.docx"Аватар Брата Абао в документе был окончательно распакован до"word/media"Под содержанием. Давайте посмотрим на структуру каталогов папки abao:

-rw-rw-r--@  1 fer  staff  1641  7 11 01:25 [Content_Types].xml
drwxr-xr-x@  3 fer  staff    96  7 11 09:41 _rels
drwxr-xr-x@  4 fer  staff   128  7 11 09:41 docProps
drwxr-xr-x@ 13 fer  staff   416  7 11 09:42 word

Очевидно, каталог abao содержит"[Content_Types].xml"документы и"_rels, docProps, слово"три подкаталога.

  • [Content_Types].xml: этот файл используется для определения типа содержимого каждого XML-файла в нем;
  • _rels: обычно будет".rels"Файл суффикса, который сохраняет взаимосвязь между различными частями в этом каталоге._relsСуществует более одного каталога, он фактически иерархический.
  • docProps: файл XML в этом каталоге используется для сохранения атрибутов файла docx;
  • word: этот каталог содержит такую ​​информацию, как содержимое, шрифты, стили или темы в документах Word.

После знакомства с форматами файлов и документами Docx, поддерживаемыми Word, мы переходим к сути —"«Как работать с документами Word во внешнем интерфейсе»".

2. Преобразование документа Word в документ HTML

В повседневной работе иногда нам нужно импортировать существующий документ Word в редактор форматированного текста для вторичной обработки.Чтобы выполнить это требование, нам нужно сначала преобразовать документ Word в документ HTML. Для реализации этой функции существует"Преобразование на стороне сервера и внешнее преобразование"Два варианта:

  • Преобразование на стороне сервера: для Java-разработчиков оно может быть напрямую основано на проекте POI. POI — это проект Apache с открытым исходным кодом, документы в различных форматах файлов и поддерживают операции чтения и записи.
  • Преобразование внешнего интерфейса: для разработчиков внешнего интерфейса, чтобы проанализировать документ Word на внешнем интерфейсе, нам сначала нужно распаковать документ Word, а затем выполнить дальнейший анализ распакованного XML-документа. Кажется, что вся функция более громоздка для реализации, но, к счастью,Mammoth.jsЭта библиотека уже реализует для нас вышеуказанный функционал.

Знакомство с использованиемMammoth.jsПрежде чем преобразовать ранее созданный документ Word в документ HTML, давайте заранее испытаем окончательный эффект преобразования.

2.1 Введение в Mammoth.js

Mammoth.jsПредназначен для преобразования документов .docx, например, созданных Microsoft Word, в HTML."Цель Mammoth — генерировать простой и чистый HTML, используя семантическую информацию в документе и игнорируя другие детали."Например, Mammoth будет преобразовывать любые абзацы со стилями заголовка 1, примененными к элементам h1, вместо того, чтобы пытаться точно воспроизвести стили заголовка (шрифт, размер текста, цвет и т. д.).

Из-за большого несоответствия между структурой, используемой в .docx, и структурой HTML это означает, что это преобразование вряд ли будет идеальным для более сложных документов. Но если вы используете стили только для семантической разметки документов, Mammoth хорошо переводится.

В настоящее время Mammoth поддерживает следующие ключевые функции:

  • Headings
  • Списки, таблицы
  • Images
  • Bold, italics, underlines, strikethrough, superscript and subscript
  • Ссылки, разрывы строк
  • Footnotes and endnotes

Он также поддерживает пользовательские правила сопоставления. Например, вы можете преобразовать WarningHeading в h1.warning, предоставив соответствующую карту стилей. Также содержимое текстового поля рассматривается как отдельный абзац и отображается после абзаца, содержащего текстовое поле.

Библиотека Mammoth.js предоставляет нам множество методов, здесь мы представляем три часто используемых API:

  • mammoth.convertToHtml(input, options): преобразование исходного документа в HTML-документ.
  • mammoth.convertToMarkdown(input, options): преобразование исходного документа в документ Markdown. Этот метод иconvertToHtmlМетод аналогичен, разница в том, что атрибут value возвращаемого объекта результата — это Markdown, а не HTML.
  • mammoth.extractRawText(input): извлечение необработанного текста документа. Это будет игнорировать все форматирование в документе. За каждым абзацем следует два разрыва строки.

После представления соответствующих функций и API-интерфейсов Mammoth.js, давайте начнем реальную боевую связь.

2.2 Mammoth.js в действии

Mammoth.js Эта библиотека поддерживает как Node.js, так и платформы браузера.mammoth.convertToHtmlФормат входного параметра метода:{arrayBuffer: arrayBuffer}, где arrayBuffer — это содержимое файла .docx. На переднем конце мы можем пройтиFileReaderAPI для чтения содержимого файла, кроме того, этот интерфейс также предоставляет метод readAsArrayBuffer, который используется для чтения содержимого указанного блоба.После завершения чтения атрибут результата сохранит прочитанный файл.ArrayBufferобъект данных. Ниже мы определяем метод readFileInputEventAsArrayBuffer:

export function readFileInputEventAsArrayBuffer(event, callback) {
  const file = event.target.files[0];

  const reader = new FileReader();

  reader.onload = function(loadEvent: Event) {
    const arrayBuffer = loadEvent.target["result"];
    callback(arrayBuffer);
  };

  reader.readAsArrayBuffer(file);
}

Этот метод используется для преобразования входного объекта File в объект ArrayBuffer. После получения объекта ArrayBuffer, соответствующего документу Word, вы можете вызвать метод convertToHtml для преобразования содержимого документа Word в документ HTML.

mammoth.convertToHtml({ arrayBuffer })

На этом этапе, если ваш документ не включает специальные типы изображений, такие какwmfилиemfтип, но обычныйjpgилиpngи так далее, то вы сможете увидеть картинки в документе Word. Это сделано?Это слишком просто?На самом деле это только начало. Когда вы просматриваете документ HTML, проанализированный Word с помощью инструментов разработчика браузера, вы обнаружите, что изображения встроены в формат Base64. Если картинок не много и одна картинка не слишком большая, то можно рассмотреть эту схему.

В случае нескольких изображений или больших изображений лучшим решением является отправка изображений на сервер файловых ресурсов. Чтобы реализовать вышеуказанные функции в Mammoth.js, вы можете использовать"convertImage"Настройте параметры для настройки процессора изображений. Конкретные примеры использования следующие:

let options = {
    convertImage: mammoth.images.imgElement(function(image) {
      return image.read("base64").then(function(imageBuffer) {
        return {
          src: "data:" + image.contentType + ";base64," + imageBuffer
        };
      });
    })
};

Функция, реализованная в приведенном выше примере, заключается в кодировании изображения в формате base64 в Word, а затем преобразовании его в форму URL-адреса данных, чтобы реализовать отображение изображения. Очевидно, что это не соответствует нашим требованиям, поэтому нам необходимо внести следующие коррективы:

const mammothOptions = {
  convertImage: mammoth.images.imgElement(function(image) {
    return image.read("base64").then(async (imageBuffer) => {
      const result = await uploadBase64Image(imageBuffer, image.contentType);
      return {
        src: result.data.path // 获取图片线上的URL地址
      };
    });
  })
};

Как следует из названия, метод uploadBase64Image используется для загрузки изображений в кодировке Base64:

async function uploadBase64Image(base64Image, mime) {
  const formData = new FormData();
  formData.append("file", base64ToBlob(base64Image, mime));
  
  return await axios({
    method: "post",
    url: "http://localhost:3000/uploadfile", // 本地图片上传的API地址
    data: formData,
    config: { headers: { "Content-Type": "multipart/form-data" } }
  });
}

Чтобы уменьшить размер файла изображения, нам нужно преобразовать изображение в формате Base64 в объект Blob, а затем отправить его, создав объект FormData. Метод base64ToBlob определяется следующим образом:

function base64ToBlob(base64, mimeType) {
  let bytes = window.atob(base64);
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeType });
}

На данный момент реализована базовая функция преобразования документа Word в HTML и автоматической загрузки изображений в документе Word на сервер файловых ресурсов. Мы не будем рассказывать, как Mammoth.js анализирует XML-файлы внутри Word, а вместо этого кратко расскажем о библиотеке JSZip, на которую Mammoth.js полагается внутри.

2.3 Введение в JSZip

JSZipэто инструмент для создания, чтения и редактирования".zip"Документация Библиотека JavaScript с прекрасным и простым API. Совместимость этой библиотеки следующая:

Opera Firefox Safari Chrome Internet Explorer Node.js
Yes Yes Yes Yes Yes Yes
Проверено с последней версией Протестировано с 3.0/3.6/последней версией Проверено с последней версией Проверено с последней версией Протестировано с IE 6/7/8/9/10 Протестировано с Node.js 0.10/последняя версия
2.3.1 Установка JSZip

При использовании JSZip вы можете установить его несколькими способами:

  • "npm":npm install jszip

  • "bower":bower install Stuk/jszip

  • "component":component install Stuk/jszip

  • "руководство": скачать сначала JSZipУстановите пакет, затем импортируйтеdist/jszip.jsилиdist/jszip.min.jsдокумент

2.3.2 Пример использования JSZip 
let zip = new JSZip();
zip.file("Hello.txt", "Hello Semlinker\n");

let img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type: "blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

Пример взят изОфициальный сайт JSZip, после успешной операции он будет загружен и сохранен автоматически"example.zip"документ. Структура каталогов распакованного файла выглядит следующим образом:

3. Преобразование документов Word в документы Markdown

"Markdown — это легкий язык разметки.", основанная Джоном Грубером. Это позволяет людям писать документы в формате простого текста, который легко читать и писать, а затем преобразовывать их в действительные документы XHTML (или HTML). Язык включает в себя многие функции разметки обычного текста, которые уже используются в электронной почте.

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

Поняв, что такое Markdown, давайте проанализируем, как преобразовать документы Word в документы Markdown. Для этой функции у нас также есть два способа справиться с ней:

  • Первый: использоватьMammoth.jsпредоставляется этой библиотекойmammoth.convertToMarkdown(input, options)метод;
  • Второй: на основеmammoth.convertToHtml(input, options)Сгенерированный HTML-документ использует инструмент преобразования HTML в Markdown для косвенного достижения вышеуказанных функций.

Давайте представим второе решение, здесь мы используем конвертер с открытым исходным кодом на Github —turndown, который представляет собой конвертер HTML в Markdown, разработанный на JavaScript и очень простой в использовании.

Сначала вы можете установить его двумя способами:

  • нпм:npm install turndown
  • сценарий:<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

После установки можно позвонитьTurndownServiceконструктор для создания экземпляра TurndownService, а затем вызвать экземплярturndown()метод для выполнения операции преобразования:

let markdown = turndownService.turndown(
  document.getElementById('content')
)

за ранее использованный"abao.docx"Окончательный преобразованный документ Markdown выглядит следующим образом:

全栈修仙之路，聚焦全栈，专注分享 TypeScript、Web API、Node.js、Deno 等全栈干货。

![](https://cdn.xxx.com/rich_159444942843202)

Следует отметить, что конструктор TurndownService поддерживает множество элементов конфигурации, которые здесь подробно не описаны. Заинтересованные друзья, вы можете прочитать самиturndownофициальная документация или посещениеонлайн-пример отказаПопробуйте.

Теперь, когда мы поговорили о Markdown, брат Абао представит своим друзьям хорошую библиотеку с открытым исходным кодом на Github.markmap, библиотека использует отображение разума для визуализации документов Markdown, и общий эффект довольно хорош:

(Источник изображения: https://markmap.js.org/repl/)

Наконец, давайте посмотрим, как динамически генерировать документы Word во внешнем интерфейсе.

В-четвертых, интерфейс динамически генерирует документы Word.

Если мы хотим динамически генерировать документы Word на внешнем интерфейсе, мы можем напрямую использовать некоторые зрелые сторонние библиотеки с открытым исходным кодом, такие как:docxилиhtml-docx-js.

Ниже мыdocxНапример, чтобы представить, как генерировать во внешнем интерфейсе".docx"отформатированный документ Word.DocxЭта библиотека предоставляет элегантный декларативный API, который позволяет нам легко создавать файлы .docx с помощью JS/TS. Кроме того, он поддерживает как Node.js, так и браузеры.

DocxЭта библиотека предоставляет разработчикам множество классов для создания соответствующих элементов в Word.Здесь мы кратко представим несколько общих классов:

  • Document: используется для создания нового документа Word;
  • Paragraph: используется для создания нового абзаца;
  • TextRun: используется для создания текста, поддерживает настройку полужирного, курсивного и подчеркнутого стилей;
  • Tables: используется для создания таблицы, поддерживает настройку содержимого каждой строки и каждой ячейки таблицы.

Далее Baoge будет использоватьDocxЭта библиотека для динамической генерации представленных ранее"abao.docx"документ, конкретный код выглядит следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <h1>阿宝哥 - 动态生成 Word 文档示例</h1>

    <button type="button" onclick="generate()">
      点击生成 Docx 文档
    </button>
    <script src="https://unpkg.com/docx@5.0.2/build/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
    <script>
      async function generate() {
        const doc = new docx.Document();

        const imageBuffer = await fetch(
          "https://avatars3.githubusercontent.com/u/4220799"
        ).then((response) => response.arrayBuffer());

        const image = docx.Media.addImage(doc, imageBuffer, 230, 230);

        doc.addSection({
          properties: {},
          children: [
            new docx.Paragraph({
              children: [
                new docx.TextRun({
                  text: "全栈修仙之路，",
                  bold: true,
                }),
                new docx.TextRun({
                  text:
                    "聚焦全栈，专注分享 TypeScript、Web API、Node.js、Deno 等全栈干货。",
                }),
              ],
            }),
            new docx.Paragraph(image),
          ],
        });

        docx.Packer.toBlob(doc).then((blob) => {
          console.log(blob);
          saveAs(blob, "abao.docx");
          console.log("文档生成成功");
        });
      }
    </script>
  </body>
</html>

В приведенном выше примере, когда пользователь нажимает"Нажмите, чтобы создать документацию Docx"После кнопки он вызоветgenerate()Перезвони. В этой функции обратного вызова сначала будет создан новый объект Document, а затем аватар A Baoge будет загружен из Github с помощью API выборки.Когда данные изображения будут успешно получены, он продолжит вызовdocx.Media.addImage()метод добавления изображений.

Тогда мы позвонимdoc.addSection()чтобы добавить блок Section, который будет действовать как контейнер для абзацев. В этом примере мы создали блок Section с двумя абзацами, один для текстовой информации и один для информации об изображении. Наконец, мы преобразуем объект Document в объект Blob, а затем передаемsaveAs()Метод загружается локально.

5. Справочные ресурсы

В этой статье используетсяmdniceнабор текста

Категории