Как добавить изображения с пакетом npm 'docx' в текстовый документ? - PullRequest
Новая
       8

Как добавить изображения с пакетом npm 'docx' в текстовый документ?

2 голосов
/ 24 марта 2020

Я нашел этот npm пакет docx, который помогает создавать файлы текстовых документов с javascript: https://github.com/dolanmiu/docx

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

Вот что я попробовал:

Попытка # 1: 

import React, { useState } from "react";
import * as fs from "fs";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc, fs.readFileSync("myImage.png"), 200, 200); // ERROR HERE: "fs.readFileSync is not a function
    doc.addSection({children: [new Paragraph(logo)]});
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Вывод # 1: TypeError: fs__WEBPACK_IMPORTED_MODULE_2 __. ReadFileSyn c не является функцией

Попытка # 2: 

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = doc.createImage("myImage.png"); // ERROR HERE: doc.createImage is not a function
    doc.addSection({children: [new Paragraph(logo)]});
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Выход # 2: Ошибка типа: do c .createImage не является функцией

Что работает: 

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc); // returns a blank image in the word document since I didn't specify a file.
    doc.addSection({
        children: [new Paragraph(logo)]
    });
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Вот документация:
- https://docx.js.org/# / использование / изображения
- https://runkit.com/dolanmiu/docx-demo5
- https://github.com/dolanmiu/docx/wiki/Images

Любая помощь очень ценится!

Заранее спасибо !!

Редактировать:

Попытка № 3: 

import React, { useState } from "react";
import moment from "moment";
import { Document, Packer, Paragraph, Media } from "docx";
import { saveAs } from "file-saver";
const GenerateDoc = () => {
    const doc = new Document();
    const logo = Media.addImage(doc, '../myImage.png'); // ERROR: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    doc.addSection({
        children: [new Paragraph(logo)]
    });
    const download = () => {
        // download function...
    };
    return (
        <div>
            <button onClick={() => {download()}}>Generate</button>
        </div>
    );
};
export default GenerateDoc;

Вывод № 3: InvalidCharacterError: Не удалось выполнить «atob» on 'Window': декодируемая строка неправильно закодирована.

...