nitin42 / redocx Goto Github PK

View Code? Open in Web Editor NEW

1.4K 26.0 75.0 395 KB

📄 Create word documents with React

JavaScript 100.00%

react renderer word-documents library react-fiber components

redocx's Introduction

redocx

Create word documents with React

Introduction

redocx is a library which lets you create word documents with React. It provides a set of components which renders your declarative views and components to word documents.

Example

A simple component that renders a "Hello World" text to a word document.

import React from 'react'
import { render, Document, Text } from 'redocx'

class App extends React.Component {
  render() {
    return (
      <Document>
        <Text>Hello World</Text>
      </Document>
    )
  }
}

render(<App />, `${__dirname}/example.docx`)

Let's get started!

Install

Babel presets and cli

npm install --save-dev babel-cli babel-core babel-preset-env babel-preset-react babel-preset-stage-0

react and redocx

npm install --save react redocx

Usage

Create a .babelrc

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}

After configuring babel and assuming you've already created a file example.js with this example, run babel-node example.js. This will render your React component to word document.

Demo

git clone https://github.com/nitin42/redocx.git
cd redocx
npm install
npm run example

Documentation

See the detailed documentation here

Contributing

Contributing guide

License

MIT

redocx's People

Contributors

Stargazers

Watchers

Forkers

deenjohn harmon25 clarkzsd bradparks luftywiranda13 empia cncrazymoon peggyrayzis imgbotapp vikashyap bobiscool zekenie songdun derickwarshaw inier ptzagk dinhbinh1610 dhenson02 keyzf devuri sibutorovic lxyhome oluwasetemi hcxiong codiechanel iamanoopmk karyarayajasa contractmill jy4618272 qqakashi amyvmiwei zwjjap bigmstone kangkang721 runk mukeshmandiwal markchipman iislam cinic hhy5277 gbozee glowychan maksymb007 bwilkins fstfwd selinp abdulsalaam kobelin923 inmagik mathcw frankszll majedb steadyhua hstandaert linecode nnals en-wyx lemoissonm briansu2004 form-creator-bot lcsouzamenezes khadeejathulhumaira mikekibz59 talent360 carlosjordandev lcanavesio ayazkhuraishi nickchengit sciumo stackpoet si3mshady suprunov naba-cloud divakarmanivel

redocx's Issues

Getting error, to up and running

babel-node ./demo/Word.js

/usr/bin/env: ‘node’: No such file or directory

npm ERR! Linux 4.10.0-32-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "example"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] example: babel-node ./demo/Word.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] example script 'babel-node ./demo/Word.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the redocx package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node ./demo/Word.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs redocx
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls redocx
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/jsroyal/redocx/npm-debug.log

I could not get it.

<ImageComponent /> not working when rendering to memory

When I add the <ImageComponent /> to the word-memory.js file, the process silently fails... The same document does work when rendering to a file directly.

word-memory.js

import fs from 'fs';
import React, { Component } from 'react';
import TextComponent from '../examples/Text';
import { render, Document, Text } from '../src/';

// Uncomment any of the below component to see what they render

import FooterComponent from '../examples/Footer';
import HeaderComponent from '../examples/Header';
import HrComponent from '../examples/Hr';
import LineBreakComponent from '../examples/LineBreak';
import PageBreakComponent from '../examples/PageBreak';
import TableComponent from '../examples/Table';
import ListComponent from '../examples/List';
import ImageComponent from '../examples/Image';

class MyDocument extends Component {
  render() {
    return (
      <Document>
        <TextComponent />
        <ImageComponent />
      </Document>
    );
  }
}

render(<MyDocument />).then((stream) => {
  fs.open('./demo/Memory.docx', 'w+', stream.length, (err, fd) => {
    if (err) {
      console.log(err);
    }
    fs.write(fd, stream.toBuffer(), (writeErr) => {
      if (writeErr) {
        console.log(writeErr);
      }
      console.log('Docx generated and saved to ./demo/Memory.docx');
    });
  });
});

CLI output

is PolarChart possilble that export to word in redocx

i want to react page export to word(.docx)

upper image is react PolarChart page
i searched how to export to word for chart
but all of your documentation can export to letter or image only

Nested block and inline nodes

Thank you for awesome project! It looks really promising, but there is a crucial thing I need to use it in my project, namely nested blocks and inline nodes, in a similar fashion like done in React-Native or React-PDF (https://github.com/diegomura/react-pdf)

This for instance doesnt work, nested won't be rendered:

class App extends React.Component {
  render() {
    return (
      <Document>
        <Text>
          Hello <Text>nested</Text> World
        </Text>
      </Document>
    );
  }
}

In React PDF for instance you have <View> component there to create a block node, or <Text> to create an inline one, and u can nest them like this:

<View>
  <View>
    <Text>
       Hello
       {' '}
       <Text>nested</Text>
       {' '}
       world
    </Text>
  </View>
</View>

This allows to style single words (now you can apply to a whole text only), or stack styles.
It would also be totally necessary if you would like to introduce flexbox layout, which I noticed you considered.

Also, additionally for me it is required because I have a dynamic document object structure from https://github.com/ianstormtaylor/slate . And because I have nodes like Bold, AlignLeft, FontSize implemented separately, I need to have a way to apply a given style separately. This approach worked perfectly fine together with slate-html-serializer and React-PDF, but with Redocs it won't work.

From what I understand, <Text> component is actually a block component. What I think would be great it to change it's name to <View>, allow nesting, and create a new <Text> component also with nesting support for inline text. Then your API would be compliant to React Native which many people are familiar with. Do you think it would be possible? If yes, would it be easy to implement?

Using Context Throws an Error

If you wrap the document with a context provider, it throws the error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.\n\nCheck the render method of `ContextProvider`.

To Replicate

import React, {createContext} from 'react'
import { render, Document, Text } from 'redocx';

const ContextProvider = createContext().Provider

render(
    <ContextProvider>
        <Document>
            <Text>Hello</Text>
        </Document>
    </ContextProvider>
);

Do you have same library for react-native?

Question: does this work with dynamic content

Can this convert only after a click event?
I need to wait for some user interactions and API requests to finish. I guess it would need an option to work at run time

renderToString funciton

Is there a way to render the document file to base64 with a renderToString?
Like how react-pdf does it?

regeneratorRuntime is not defined

Uncaught ReferenceError: regeneratorRuntime is not defined
at modules.js?hash=ef51e63ae4ee39b60c1820fb31cac832c0ce8cf6:231605
at render.js (modules.js?hash=ef51e63ae4ee39b60c1820fb31cac832c0ce8cf6:231647)
at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)
at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248)
at index.js (modules.js?hash=ef51e63ae4ee39b60c1820fb31cac832c0ce8cf6:231541)
at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)

Does it support react-native ?

i try once but have some trouble ,please reply，thks

Page number component?

Do you think it would be possible (it's possible in Word) to add a page number component to this? I will pick around the code to see if I can find anything, but please let me know if you think it's possible or not and I'll gladly contribute!

For reference, if you go to Word, then edit the header, there is an option to add the page number to the top left, middle or right.

Thanks!

Questions about the header component and also Column support

Hi, Dear team,

Thanks for the awesome efforts u guys put onto this project, it's great. Recently, Ive started using this cool stuff to create CV-like document. Ive seen a few limits, so wanna ask some questions here:

Can header component render other intermediate components? just like Text component with the capability to render LineBreak/Image/Hr components, so that I could so things like this(looks like putting text on top of an image):

Alternatively, lets say in Text component, is it possible to align the text on top of an image?
would Column be supported in the future?

How to use using function in react?

How to use using function in react?
And how to download the files? Need a new package?

Tanks.

destructuring word docs?

I'm interested in destructuring word documents into markdown. Would this tool be able to help? If not, any clue where I might turn?

Table of content

Any plans to generate table of contents by titles?

Issue with NPM V5.3.0

Not uncommon for new versions of npm to break babel or something on a few projects.
Installing dependencies in a fresh new npm module using newest npm version results in an error like this:

Error: Cannot find module 'react/lib/checkPropTypes'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\harmon\Desktop\redocx-testing\node_modules\react-dom\lib\checkReactTypeSpec.js:13:22)
    at Module._compile (module.js:573:30)
    at Module._extensions..js (module.js:584:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\harmon\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)

This may be a Just a Windows problem..
Removing node_modules folder, and reinstalled dependencies using yarn install resolved the problem!

Figure I would make a post for people looking to try this out, that run into the same issue.
Very cool library!

Question : can we use this lib client side

Hi @nitin42,

thanks a lot for your work !

Can we use this library client side to render html content, and then export them as docx file ? Thanks a lot

Making it work with Create-React-App

Have you tested it with a CRA-App by any chance? I have tried to make it work but unfortunately without success so far. CRA doesn't let you configure the Babel settings any further, could that be the reason?

no online demo

is it possible to provide some online demo ?