Comments (13)
@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" />
from react-native-html-to-pdf.
Yes, you can specify font family and sizes as long as they are supported on the os.
from react-native-html-to-pdf.
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?
from react-native-html-to-pdf.
Not at the moment. Sorry.
from react-native-html-to-pdf.
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);
});
},
from react-native-html-to-pdf.
@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.
from react-native-html-to-pdf.
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.
from react-native-html-to-pdf.
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
from react-native-html-to-pdf.
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?
from react-native-html-to-pdf.
@superandrew213 Did you find a way to reference those images? I have the same issue
from react-native-html-to-pdf.
@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.
from react-native-html-to-pdf.
@Nicolas-Menettrier I only needed to use one image so I just left it in the root dir.
from react-native-html-to-pdf.
How can I use border for a
border: 1px solid #aaa
from react-native-html-to-pdf.
Related Issues (20)
- 'React/RCTConvert.h' file not found' in xcode 13 React Native 0.64.3 HOT 4
- Preview PDF after creating HOT 5
- How to Remove padding in android ? HOT 1
- in html content conditional statement are not wokring HOT 2
- PDFs of identical contents have different checksum every run HOT 1
- How can I add a footer & header to each page? HOT 3
- can i use this package on react native windows? HOT 2
- When there is a qrcode in Html it not shows in pdf - android HOT 1
- Crash in iOS HOT 1
- Unable to display pageNumber in pdf for Ios HOT 1
- is there a way to generate pdf without page break?
- Item's background colors is not showing in ios HOT 8
- How to add <img> html tag with local image in RN project folder? HOT 2
- This library is not working in the android SDK 33 HOT 3
- [TypeError: Cannot read property 'convert' of null] HOT 3
- Creating an extra page in the pdf in iOS, when creating page by loops
- Error when building the app on android
- CSS `background-color` and `background` property doesn't work on iOS HOT 5
- generate pdf on a single page HOT 1
- React native html to pdf with <embed><embed/> with ios 17.4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-html-to-pdf.