React-pdf: Background Image URL

[audiolion]

OS: OSX/Ubuntu 16.04

React-pdf version: latest

Description: Getting background images for the page

How to replicate issue including code snippet (if applies):

render() {
  const styles = StyleSheet.create({
    container: {
      background: 'url("http://imgur.com/nd3yf1Q.png") no-repeat center center fixed',
    }
  });
  return (
      <Document>
        <Page size="LETTER" orientation="landscape">
          <View style={styles.container}>
            {/* inner content of view */}
          </View>
        </Page>
      </Document>
  );
}

I am trying to have my entire page contain this background image from a url, is this possible with react-pdf? I can do it with pdfkit

[diegomura]

@audiolion No. Not currently possible.
The only way I can think to make it work is by positioning an absolute image and some elements after. I recommend you give it a try

[audiolion]

I actually checked through pdfkit, I dont think pdfkit supports this feature actually. I am going to try a few different workarounds and will report back if I find a solution.

[diegomura]

absolute positioning is not something that pdfkit implements, but react-pdf does. You can see an example of absolute positioning here

[audiolion]

Awesome, yep this works to create a background image covering the pdf

const styles = StyleSheet.create({
  pageBackground: {
    position: 'absolute',
    minWidth: '100%',
    minHeight: '100%',
    display: 'block',
    height: '100%',
    width: '100%',
  },
});

class MyComponent extends React.component() {
  render() {
    return (
      <Document>
        <Page size="LETTER" orientation="landscape">
          <Image src="http://imgur.com/nd3yf1Q.png" style={styles.pageBackground} />
        </Page>
      </Document>
    );
  }
}

[diegomura]

@audiolion awesome! Glad it worked

[captain-hayze]

You rock!

[ampsteric]

Why is it not working in my case?

import React, { useMemo } from "react";

import {
PDFDownloadLink,
Document,
Page,
View,
Text,
Image,
} from "@react-pdf/renderer";

const styles = {
pageBackground: {
position: "absolute",
minWidth: "100%",
minHeight: "100%",
display: "block",
height: "100%",
width: "100%",
},
};
const MyDoc = () => (



src="http://imgur.com/nd3yf1Q.png"
style={styles.pageBackground}
/>



);

export default function Appa() {
return useMemo(
() => (
} fileName="some-nane.pdf">
{({ loading }) => (loading ? "loading..." : "download")}

),
[]
);
}