I am building reactJs app, I am using react-pdf/renderer to render the pdf. I want to show Header in the pdf.
Below is the my code.
MainComponent.jsx
<Document>
<Page size="A4" style={styles.page}>
<MyFixedHeader style={{flex: 0.2}}/>
<Image style={styles.image} src={Logo} />
<Text style={styles.text}>
{pdfData}
</Text>
</Page>
</Document>
MyFixedHeader.jsx
import React, { useEffect, useState } from 'react';
export const MyFixedHeader = () => {
return (<>
hi
</>)
}
By using this code, I am getting blank screen.
Thanks.
I added a screenshot of how to add a footer on each page end. here is the link https://react-pdf.org/repl you can test it here
#mehak
are you applying these styles??
you can check here official site https://react-pdf.org/advanced
and there are many different other ways to create Header and Footer for react-pdf
Added Horizontal Line
How to register Font?
Related
This my code for the a components inside my Next.js 13 with ts, eslint, as well as Chakra UI.
Both images and videos is not working or showing.
I tried the HTML <img> tag as well as importing Image from Chakra. Still the same issue it's not working.
import { Flex } from "#chakra-ui/react";
import Image from 'next/image';
const Navbar:React.FC = () => {
return (
<>
<Flex bg="white" height="44px" padding="6px 12px">
<Flex>
<Image
src={"/public/images/logo.png"} alt='Apex Logo' width="350" height="300"/>
</Flex>
</Flex>
<video src={'/public/images/about video.mp4 '} controls height="100%" width="100%"></video>
</>
)
}
export default Navbar;
I think you dont have to pass /public
src={"/images/logo.png"}
next.js automatically will go inside public folder
I'm new with react. I want to create a website that can generate pdf file to download. I use React with Vite and Tailwind. I found this in internet: https://react-pdf.org/advanced#on-the-fly-rendering.
I try it in my code but nothing shows up.
import {Document, Page, PDFDownloadLink, StyleSheet, Text, View} from "#react-pdf/renderer";
import React from "react";
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#E4E4E4",
},
section: {
margin: 10,
padding: 10,
flexGrow: 1,
},
});
// Create Document Component
const MyDoc = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
const Dashboard = () => (
<div>
<PDFDownloadLink
className=" bg-slate-600"
document={<MyDoc />}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) =>
<button className=" bg-slate-500">Loading document...</button>
) : (
<button className=" bg-slate-500">Download now!</button>
)
}
</PDFDownloadLink>
</div>
);
export default Dashboard;
And i call this from my App.jsx file
import Dashboard from "./Dashboard";
function App() {
return (
<div className=" bg-slate-500">
<Dashboard />
</div>
);
}
export default App;
This is how it's look when run
This is when i inspect
I run it from brave browser, but it still the same when i run it from google browser.
Anyone know why this is happen? Any help is appreciated
So after a lot of searching, i found that my problem is caused by vite. This post pretty much solve it
attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error. Does anyone know why my react icons are not functioning properly? Thanks in advance.
import { View, Text, SafeAreaView, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '#react-navigation/native';
import { FaBeer } from 'react-icons/fa';
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<SafeAreaView>
<Text className="text-red-500">
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
url:"https://links.papareact.com/wru",
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now
</Text>
<Text className="font-bold text-xl">Current Location
<FaBeer />
</Text>
</View>
</View>
</Text>
</SafeAreaView>
);
};
export default HomeScreen;
react-icons doesn't work with react native (i think). You need to use react-native-vector-icons (https://www.npmjs.com/package/react-native-vector-icons)
you cant use normal react icons since in react native icons can be either an image or can be SVG, so for SVG icons, you need to add react-native-svg package.
You should install as #dev404 said https://github.com/oblador/react-native-vector-icons
Also do follow their installation process for both android and ios.
YOu can check the below available icon sets.
Hope it helps, feel free for doubts
I want to generate a PDF document that is generated after user click "Create PDF document" for my current React page. The document I want to generate will have the following:
Some, but not all component in the current page
Selectable
Only download the document when clicking and nowhere else
I have spent 3 hours researching on this trivial task, but somehow all library I have looking up for only allow their pre-defined component, or not selectable, or both. I know that this task is very trivial, but how exactly I could do that?
The best way to do this is, having a separate component that only contains what data need to be downloaded. And you can pass all necessary data using props.
I recommend using this library React-PDF.
App.js
import { PDFDownloadLink } from '#react-pdf/renderer';
import Document from './Document.js'
export default function App() {
const data = {/* Pass your data here */}
return (
<div className="App">
<PDFDownloadLink document={<MyDocument data={data}/>} fileName="somename.pdf">
{({ blob, url, loading, error }) =>
loading ? 'Loading document...' : 'Download now!'
}
</PDFDownloadLink>
</div>
);
}
Document.js
import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '#react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
// Create Document Component
const MyDocument = ({ data }) => ( //
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>{data.something}</Text>
</View>
<View style={styles.section}>
<Text>{data.something}</Text>
</View>
</Page>
</Document>
);
In the main component, you will have a Download now! button. Your PDF will only contain data that you pass through props
How do you hide the status bar for iOS or Android when developing with React Native? I've imported StatusBar, but I believe there is also StatusBarIOS and a StatusBar for Android.
Figured out how to hide the status bar. First of all, StatusBarIOS is deprecated so you need to import StatusBar and then simply include this code snippet at the top of your render:
<StatusBar hidden />
React Native Docs on StatusBar
You can invoke this method from anywhere in your component:
import React, { Component } from 'react';
import { StatusBar } from 'react-native';
class MyComponent extends Component {
componentDidMount() {
StatusBar.setHidden(true);
}
}
EDIT:
This will hide the status bar for the entire app and not just in your specific component, to solve this you can do:
componentWillUnmount() {
StatusBar.setHidden(false);
}
Or calling this method with false from somewhere else.
For Hidden:
StatusBar.setHidden(true, 'none');
For Show:
StatusBar.setHidden(false, 'slide');
I prefer the simple way of importing the StatusBar component and passing true to hidden prop...
So Simply:
import React from "react";
import { StatusBar, View, Text } from "react-native";
class App extends React.Component {
render() {
return (
<View>
<StatusBar hidden={true} />
<Text>Hello React Native!</Text>
</View>
)
}
}
From version 0.?? to current (0.55 / June 2018)
<StatusBar hidden />
Credit to the first comment in this answer
Remember to first import the StatusBar component as per the other answers here
If your reason for hiding it is to prevent your components from overlapping it, you might prefer to just use SafeAreaView as follows:
<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
<View style={{flex: 1}}>
<Text>Hello World!</Text>
</View>
</SafeAreaView>
It should be the parent component of a screen and can optionally use a backgroundColor to match the color of your screen. Make sure to set a flex attribute. Your components will now just take up any area not being used by the status bar. This is especially useful in getting around the 'notch' issue with some of the newer phones.
SafeAreaView is a component of react-native so you will need to make sure you add it to your imports:
import { SafeAreaView, Text, View } from 'react-native';
to make it transparent on android you can do this
<StatusBar backgroundColor={'#ffffff00'} />
{Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
also <StatusBar hidden /> is hidden it but you may see a margin on top
It hasn't worked doesn't matter what you have tried?
Maybe there is another <StatusBar hidden="false"> in your code. And it is deeper than your definition. This will replace your previous hidden="true" setting.
<View>
<StatusBar hidden={true} /> // this will be replaced by the deeper StatusBar tag
<View>
<StatusBar hidden={false} /> // remove this or put your `hidden="true"` here
</View>
</View>