Создать документ Word в JavaScript с помощью Docx.js?

Я пытаюсь использовать docx.js (Github repo) для создания документа Word, но я похоже, не может заставить его работать.

Я скопировал необработанный код в консоль Google Chrome после изменения строки 247, чтобы исправить ошибку "textAlign" undefined

if (inNode.style && inNode.style.textAlign){..}

Что делает функцию convertContent доступной. Результатом этого является объект, например.

JSON.stringify( convertContent($('<p>Word!</p>)[0]) )

Результаты -

"{"string":
      "<w:body>
            <w:p>
                <w:r>
                    <w:t xml:space=\"preserve\">Word!</w:t>
                </w:r>
            </w:p>
       </w:body>"
 ,"charSpaceCount":5
 ,"charCount":5,
 "pCount":1}"

Я скопировал

<w:body>
    <w:p>
        <w:r>
            <w:t xml:space="preserve">Word!</w:t>
        </w:r>
    </w:p>
</w:body>

в Notepad ++ и сохранил его как файл с расширением "docx", но когда я его открываю в MS Word, но он говорит: "Невозможно открыть, потому что проблема с содержимым".

Я пропустил какой-то атрибут или теги XML или что-то еще?

Ответы

Ответ 1

Этот код не может работать на JSFiddle из-за ajaxCalls для локальных файлов (все, что находится в папке blank), или вы должны ввести все файлы в формате ByteArray и использовать jsFiddle echo API: http://doc.jsfiddle.net/use/echo.html

Ответ 2

Вы можете создать документ Docx из шаблона, используя docxtemplater (библиотека, которую я создал).

Он может заменить теги на свои значения (например, механизм шаблонов), а также заменить изображения.

Ниже приведена демо-версия шаблона: http://javascript-ninja.fr/docxtemplater/v1/examples/demo.html

Ответ 3

Я знаю, что это более старый вопрос, и у вас уже есть ответ, но я изо всех сил пытался заставить его работать целый день, поэтому я решил поделиться своими результатами.

Как и вы, мне пришлось исправить ошибку textAlign, изменив строку на это:

if (inNode.style && inNode.style.textAlign)

Кроме того, он не обрабатывал HTML-комментарии. Таким образом, я должен был добавить следующую строку выше проверки для "#text" node в цикле for:

if (inNodeChild.nodeName === '#comment') continue;

Для создания docx было сложно, поскольку на данный момент нет никакой документации по этому вопросу. Но просматривая код, я вижу, что он ожидает, что HTML будет находиться в объекте File. Для моих целей я хотел использовать обработанный HTML, а не некоторый HTML файл, который пользователь должен выбрать для загрузки. Поэтому я должен был обмануть его, создав свой собственный объект с тем же свойством, который он искал, и передал его. Чтобы сохранить его клиенту, я использую FileSaver.js, для которого требуется blob. я включил эту функцию, которая преобразует base64 в blob. Поэтому мой код для его реализации:

var result = docx({ DOM: $('#myDiv')[0] });
var blob = b64toBlob(result.base64, "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
saveAs(blob, "test.docx");

В конце концов, это будет работать для простых документов Word, но не является слишком сложным для чего-то большего. Я не мог получить ни один из моих стилей для рендеринга, и я даже не пытался заставить изображения работать. С тех пор я отказался от этого подхода и теперь изучаю DocxgenJS или какое-то решение на стороне сервера.

Ответ 4

Вы правильно делаете код, но ваш файл не является допустимым файлом docx. Если вы просмотрите функцию docx() в docx.js, вы увидите, что файл docx на самом деле является почтовым индексом, содержащим несколько XML файлов.

Ответ 6

Я использую Open Xml SDK для JavaScript.

http://ericwhite.com/blog/open-xml-sdk-for-javascript/

В принципе, на веб-сервере у меня есть пустой файл docx в качестве нового шаблона. когда пользователь в браузере нажимает новый файл docx, я буду извлекать пустой файл docx в качестве шаблона, преобразовать его в BASE64 и вернуть его как ответ Ajax.

в сценариях клиента, вы преобразовываете строку BASE64 в массив байтов и используете openxmlsdk.js для загрузки байтового массива в качестве объекта javascript OpenXmlPackage.

После загрузки пакета вы можете использовать обычный OpenXmlPart для создания реального документа. (вставка изображения, создание таблицы/строки).

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

Проверьте URL выше, есть полезные примеры этого в JavaScript.