diegomura / react-pdf Goto Github PK
View Code? Open in Web Editor NEW📄 Create PDF files using React
Home Page: https://react-pdf.org
License: MIT License
📄 Create PDF files using React
Home Page: https://react-pdf.org
License: MIT License
This is a technical debt that we have. We should have all components tested befrore our first release candidate. In the future, a new feature without tests will not be merged
As discussed in #24, we will implement react-pdf
to use pdfkit
as a pdf rendering tool.
Because we aim to do things that this library doesn't support, maybe this change is just to release a v1 as soon as possible, and then see what's best.
Since we are currently having issues about how Yoga is calculating the layout of text and images, I want list here some basic use cases that must work before releasing:
As promised some write up about my personal idea's I wish to have within a pdf renderer within React.
First of all the idea to create pdf's with the declerative syntax of react sounds amazing, also composing a PDF of more composable Components.
To support those two render targets we could make 2 separate packages "react-pdf-dom" and "react-dom-native" we could do it within separate repo's but personally I like to keep all the relavant code within the same code base, this can be archived with a solution like lerna what is your opinion about that? @diegomura
As an example the idea of a cross-renderer react renderer can be seen within the react-art-fiber renderer, public here.
The idea is to have two main building blocks for your pdf render target.
Those two will be Text and View, the reason I think this would be a great idea, is that it is used in other react renderers so it would feel less ancient. Within this repo there is some more explanation about this reasoning.
This is something we can't currently archive, the reason behind is that pdfkit does have it's own kind of layout rendering and / or calculations.
Things we should do before we could support this kind of magic is:
I could have missed some.
This is not because pdfkit is bad or something, it is just that it makes it more difficult to archive the goals mentioned in the comment, we still will be using fontkit I guess because text measuring is hard.
This will be something I don't even know how to implement yet, but should be doable when we have defined our own pdf primitives. It's something that would be great but not relevant yet.
Do you have some other thoughts?
The size property can be either an array specifying [width, height] in PDF points (72 per inch), or a string specifying a predefined size.
List of predefined sizes:
Gain compatibility with react-primitives-svg.
This includes author, title and any other possible attribute. It should also include that the document was made with react-pdf
Unfortunately react-pdf
is already taken on npm (https://github.com/nnarhinen/react-pdf) so we will have to come up with another name 😓 .
@jbovenschen what do you think?
We should be able to add '.jpg' and '.png' images to the pdf document
highlight(x, y, width, height, options)
Text rendering phase should support many children, and not just a text string as it is right now
Thanks for a great library I was playing around with something similar recently.
This is what I am trying to solve currently and wondering if it is/will be possible with react-pdf:
I need to be able to generate loads of different PDFs in our platform and would love to do that fully on the frontend. The user clicks download
button which allows him to download a generated PDF by something like react-pdf
?
The idea is to gain full compatibility with react-primitives.
This will make it easier to render existing react-components within a pdf, things which would be made possible when supporting this will be:
Things we can support (as far as I know):
Done
View
StyleSheet
In Progress
Text
Image
Not possible
Animated
(Maybe possible but we should improve current performance)Touchable
(No interactions possible in PDF).For both Animated
and Touchable
we need to figure out how to not break components which use both of those primitives.
Also nice to have is full compatibility with react-primitives-svg.
@diegomura What do you think?
We will need to document the pdf components and the different libraries, both for the README and for the future site
We currently have a '@react-pdf/examples' private package that run examples.
We should be able to run all examples for every platform (node/dom/native) in a neat way. My suggestion would be by running something like this:
yarn example -- <example-name> <platform-name>
Ex.
yarn example -- fractals dom
yarn example -- fractals node
If no platform name is specified, it should be node.
The command format may change
My setup:
$ mkdir pdf
$ cd pdf
$ yarn add react
$ yarn add @react-pdf/core
$ node index.js
# index.js simply 'require's @react-pdf/core
Error: Cannot find module 'lodash/fp/toPairsIn'
Adding lodash
via yarn add lodash
fixes the issue. (Am I supposed to do yarn add react-pdf
, not yarn add @react-pdf/core
..?)
I tried to make the package work in the browser, but ran into a bunch of issues along the way:
@react-pdf/dom (0.1.6)
referencing the wrong core package (react-pdf
instead of @react-pdf/core
)Does anyone know what's the matter or has a local setup that works browser-side?
We dont have yet a neat way of defining and appying what are the default props and styles to be applied to elements.
I imagine something like:
class Text extends PDFEntry {
defaultProps = {
// props here
}
// ...
}
The layout property can be either portrait (the default) or landscape
Make it possible to render pdf's inside react-native.
Same way as the react-pdf-dom package works.
The callback should be called after the rendering process finishes.
If PDFs are static, I don't see why we need to introduce React and JSX. Can someone explain the premise of this project, and why someone might want to choose it over a more popular system such as (PDF)LaTeX?
This will be useful on the dom and native environments. Maybe we can benefit from PDF incremental updates for this.
Hi,
I am getting the following error when trying the example in the README.
Failed to compile.
./~/@react-pdf/core/lib/index.js
Module not found: `/node_modules/@react-pdf/core/lib/stylesheet/index.js` does not match the corresponding path on disk `Stylesheet`.
I am not sure if that makes a difference, but the folder is named 'Stylesheet', while in the import path it is 'stylesheet'.
For reference, I am using the versions published on npm.
What is the current behavior?
I installed yarn for the first time per brew on mac. When trying to yarn install this project it seems to freeze on installing external dependencies. Nothing is happening for a long time:
What is the expected behavior?
Finishing the installation.
Please mention your node.js, yarn and operating system version.
node.js 7.10.0
yarn 0.24.5
macOS Sierra 10.12.4
Interesting project for sure! Are there any plans on supporting third party plugins? I have previously created a table plugin for jspdf jspdf-autotable and was wondering if this is something that will be possible in react-pdf
.
Oh and btw, any plans on supporting tables natively?
I tested examples and it works great, but when I tried to load it into my project I got 'SyntaxError: Unexpected token import', I believe that's because the lib is not compiled into es5?
I'm using react-create-app, and everything is written in es6 and works fine, just not sure what's the proper way to handle this? Thanks!
We will need a landing page to promote the library.
I imagined it can have something like a repl, similar how babel does, where you can type code and see the rendered document on the right. Maybe react-playground can be used for that.
Design ideas and contributions will come very handy.
It would be very cool to have people suggesting logos and vote to choose one. So, if someone wants to suggest and design a logo, please feel free to do it!
Would like to be able to graba data from PDF forms.
For reference: https://facebook.github.io/react-native/docs/stylesheet.html
Hi, I'm having trouble getting the examples to run. I cloned the repo with
git clone https://github.com/diegomura/react-pdf.git
, then
cd react-pdf
yarn install
~/dev/react-pdf ±master⚡ > yarn example -- fractals
yarn example v0.15.1
$ "babel-node ./examples/index.js" fractals
sh: babel-node ./examples/index.js: No such file or directory
error Command failed with exit code 127.
info Visit http://yarnpkg.com/en/docs/cli/example for documentation about this command.
Although the file ./examples/index.js
is actually there. Then I tried running babel-node directly:
babel-node ./examples/index.js fractals
{ Error: Cannot find module 'react'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/moriz/dev/react-pdf/examples/fractals/index.js:3:1)
at Module._compile (module.js:571:32)
at loader (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12) code: 'MODULE_NOT_FOUND' }
I tried installing the react package in the root dir with yarn add react, then I'm getting this error, after which I'm not sure anymore what to do:
~/dev/react-pdf ±master⚡ > babel-node ./examples/index.js fractals
{ Error: Cannot find module '@react-pdf/core'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/moriz/dev/react-pdf/packages/react-pdf-node/lib/index.js:15:13)
at Module._compile (module.js:571:32)
at loader (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12) code: 'MODULE_NOT_FOUND' }
Node version v7.5.0
yarn version 0.15.1
macOS Sierra 10.12.4
This will be needed for #53, and maybe more future features. async/await will be handy for this process
Hey guys, could you please help me with this error
../~/@react-pdf/core/lib/elements/Text.js
Module not found: Can't resolve 'lodash.isnan' in '/node_modules/@react-pdf/core/lib/elements'
I created a react app using creat-react-app and added following:
yarn add @react-pdf/core
yarn add @react-pdf/node
After that, I copy pasted the sample code given on git (https://github.com/diegomura/react-pdf)
Do I have to install this missing dependency?
Is it planned to add support for custom fonts? it is needed for stylistic reasons and to support non-latin languages.
If an element does not have a style attribute set, it should use it's parents. If none of them has it, should use a default one
I am testing out react-pdf as an alternative to our current approach and so far it is very interesting. I really like the concept to use react to define the pdf versus individual render calls.
To the point when I try to create lines of text in a PDF changing the fontSize style is resulting in whitespace about and below the text. It almost seems that the logic to compute the size of the element still thinks it is the default 18.
Here is a PDF illustrating what I am seeing:
example.pdf
Here is the code used to generate the example:
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/core';
import ReactPDF from '@react-pdf/node';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
},
textSmall: {
fontSize:8,
margin:0,
padding:0,
height:10,
},
textLarge: {
fontSize: 12,
margin:0,
padding:0,
}
});
// Create Document Component
const lines = (count) => {
let lines = [];
for (let i = 0; i < count;i++) {
let s = {};
if (count > 20) s = styles.textSmall;
else if (count > 10) s = styles.textLarge;
lines.push(<Text key={i} style={s}>
{'Line #' + (i+1)}
</Text>);
}
return lines;
};
const MyDocument = () => (
<Document>
<Page size="A4">
<View>
{lines(40)}
</View>
</Page>
<Page size="A4" style={styles.page}>
<View>
{lines(20)}
</View>
</Page>
<Page size="A4" style={styles.page}>
<View>
{lines(10)}
</View>
</Page>
</Document>
);
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
Hey i have cloned your repo locally..can u plz help me in running the examples..because the example mention yarn example -- fractals doesn't seem to work.And the sub-folders have their own package.json do we have to install them explicitly?
Thanks.
Would be nice to always have the examples up-to-date with the codebase.
We can add something like yarn example -- all
and call it in the precommit or prepush hooks
note(x, y, width, height, contents, options)
textAnnotation(x, y, width, height, text, options)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.