Does this support fonts and css?

[wootwoot1234]

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]

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

[wootwoot1234]

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]

Not at the moment. Sorry.

[wootwoot1234]

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]

@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]

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]

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]

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]

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

[wootwoot1234]

@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]

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

[superandrew213]

@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]

How can I use border for a

border: 1px solid #aaa