christopherdro / react-native-html-to-pdf

Convert html strings to PDF documents using React Native
MIT License
435 stars 269 forks source link

Does this support fonts and css? #3

Closed wootwoot1234 closed 8 years ago

wootwoot1234 commented 8 years ago

I'm looking at using this to create a pdf in one of my projects but wanted to know how much control I have over the formatting and styling on the PDF. I didn't see any thing in the docs.

christopherdro commented 8 years ago

Yes, you can specify font family and sizes as long as they are supported on the os.

wootwoot1234 commented 8 years ago

Prefect! That's great news. I'm excited to try it out. Do you have an example of a more complicated pdf with formatting, fonts, and images?

christopherdro commented 8 years ago

Not at the moment. Sorry.

wootwoot1234 commented 8 years ago

I wanted to share this incase someone else needs to create a pdf using images or font-types. I dragged the image and font file I needed into xcode in the root directory and referenced them like this:

createPDF() {
  var options = {
    html: '<style>    @font-face {        font-family: \'rumpelstiltskinregular\';        src: url(\'rumpelstiltskin-webfont-webfont.woff\');        font-weight: normal;        font-style: normal;    }    .test{        background-color:green;        font-family:\'rumpelstiltskinregular\'    }</style><p class="test">This is a test!</p><img src="419609.jpeg" />', // HTML String

    fileName: 'test1',          /* Optional: Custom Filename excluded extention
                                  Default: Randomly generated
                                */

    directory: 'docs',          /* Optional: 'docs' will save the file in the `Documents`
                                  Default: Temp directory
                                */

    height: 800,                /* Optional: 800 sets the height of the DOCUMENT that will be produced
                                  Default: 612
                                */
    width: 1056,                /* Optional: 1056 sets the width of the DOCUMENT that will produced
                                  Default: 792
                                */
    padding: 24,                 /* Optional: 24 is the # of pixels between the outer paper edge and
                                          corresponding content edge.  Example: width of 1056 - 2*padding
                                          => content width of 1008
                                  Default: 10
                                */
  };

  RNHTMLtoPDF.convert(options).then((filePath) => {
    console.log(filePath);
  });
},
superandrew213 commented 8 years ago

@wootwoot1234 did you find another way to add images other than adding them in the root dir?

I tried using

require('image!ImageName')

for images in Images.xcassets and it works on sim but not on device.

wootwoot1234 commented 8 years ago

This was working for me but I noticed it broke after the last update of RN. I'm not sure why yet, it might be a really simple fix (probably is). I've had to put the app I'm working on, on hold because I'm moving. This is the code I have that was working and may still work for you:

Note: I'm using React Native FS for the path. The images are located int he documents directory.

var coverImage = RNFS.DocumentDirectoryPath + '/' + imageName + ".jpg";
var column = '<div class="img cover" style="background-image: url(\'' + coverImage + '\');"></div>';

Let me know if this works and if not, what you did to fix it.

christopherdro commented 8 years ago

I don't think using require for assets will really work because of the way the packager handles bundling assets. You'll most likely have to specify the absolute path of the image or have a workaround like @wootwoot1234

superandrew213 commented 8 years ago

For the images the user creates which are stored in the document directory, I am using the absolute path. But this one is for a logo which I have in the image assets folder. Is there a way to reference those images?

Nicolas-Menettrier commented 8 years ago

@superandrew213 Did you find a way to reference those images? I have the same issue

wootwoot1234 commented 8 years ago

@superandrew213 the example I posted in the comment above is working again for me again. I think my issue before didn't have anything to do with react-native-html-to-pdf.

superandrew213 commented 8 years ago

@Nicolas-Menettrier I only needed to use one image so I just left it in the root dir.

superandrew213 commented 8 years ago

@wootwoot1234 yeah if you have the absolute path of the image it works fine. My issue was that I could not reference images in Images.xcassets using require('image!ImageName') unless I add them in the root folder and target them directly <img src="image-name.png" />

NgKhanh commented 6 years ago

How can I use border for a

border: 1px solid #aaa