im trying to load pdf using react-native-pdf
it works for most of the pdfs, but for some it throws an error "load pdf failed"
i am getting the pdf in base64 state and pass it to react-native-pdf.
ive looked everywhere and cant find a fix.
any idea how to solve this ?
my code:
setSource({uri:`data:application/pdf;base64,${documentBinary}`, cache:true})
<Pdf
style={styles.pdf}
source={source}
onLoadComplete={(numberOfPages, filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
console.log(`cache path: ${filePath}`)
if(currentDocument != null){
cachedFilesMap.setItem(currentDocument.docNum, filePath)
}
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
/>
thnx
Related
im trying to show a file using react-native-pdf
i pass the base 64 to to the component .
and it works for most pdfs. but for 1 of them it doesnt .
for the pdf that doesnt work on ios, it works on android.
i tried with and without caching.
tried separating the react native pdf and the react-native-blob-util , but nothing worked.
any help plz ?
setSource({uri:`data:application/pdf;base64,${documentBinary}`, cache:false})
<Pdf
style={styles.pdf}
source={source}
onLoadComplete={(numberOfPages, filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
console.log(`cache path: ${filePath}`)
if(currentDocument != null){
cachedFilesMap.setItem(currentDocument.docNum, filePath)
}
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
/>
I am trying to send a logo image in the HTML using sendGrid mailing service. I went through a lot of articles and tried a lot but still could not figure out on how to display inline image using content_id.
I went through following links but still could not make it work:
[Link1][1]: https://sendgrid.com/blog/embedding-images-emails-facts/
[Link2][2]: https://github.com/sendgrid/sendgrid-nodejs/issues/841
Few of the answers suggest to add image as a base64 string in HTML but that does not work with few web mailing clients.
Here is my code:
`
try
{
const msg = {
to: `${customerData.raw[0].invoicemail}`, // List of receivers email address
from : 'xxxx#xxx.com',
subject: `${subject}`, // Subject line
html: emailData, // HTML body content
attachments:
[
{filename:`${filename}`,content:invoice,type:"application/pdf"},
{filename:'logo.jpg',content:logoImageData,content_id:'logo',type:"image/jpg",disposition:"inline"}
],
}
sgMail.send(msg)
//return this.mailerService.sendEmail(msg)
}
catch
{
return false
}`
And here is the HTML block:
<img src = "content_id:logo" alt = "Logo Image" width=140 height=20>
Also, the image is being received as an attachment but is not displayed.
Sorry for the very late reply, I've also had trouble getting my image to display using SendGrid.
#Abhijeet, have you tried replacing src = "content_id:logo" with src="cid:logo"?
For other beginners, like myself, using SendGrid I will include the other steps that #Abhijeet already has done.
Upload and convert your image file to base64 (we'll call this logoImageData).
We want to replace the beginning of the base64 encoded image string using String.prototype.replace().
export const cleanLogoImageData = logoImageData.replace('data:image/jpeg;base64,' , '')
Now, in the attachments for mail data for SendGrid, you need to add these to your object: filename, content, contentType, content_id, and disposition.
const msg = {
attachments: [
{
filename: "logo.jpg",
content: cleanLogoImageData,
contentType: "image/jpeg",
content_id: "logo",
disposition: "inline",
},
],
}
content_id and disposition: "inline" are what got my logo to show.
Finally, in the html file holding your <img />, you must set the src as cid:logo or whatever your content_id is. And moreover, it's recommended to add align="top" and display: block in your img tag for better and consistent cross-platform email display of the image.
<img align="top"
style="display: block"
src="cid:logo"
alt="company logo"
/>
I am trying to render pdf using react-pdf the issue I am facing is that I am displaying image from the backend server using the URL. But it displays blank in the pdf. When I debugged further came to know that when I put breakpoint on the highlighted line the image gets displayed. May be it gets little time to load the image from remote URL ?
<Page size="A4" style={styles.page}>
{this.state.productsToBeExported.map((product) => {
const img = this.getImageSource(product);
//if breakpoint is added here then the images are displayed
return (
<View
key={product.productId}
style={styles.section}
>
<Image
style={{
width: imgWidth + "px",
border: "2pt solid #999898",
}}
src={img}
></Image>
</View>)
});
</Page>
//remote Image Url (Node server)
getImageSource(product) {
return `${URL}/${this.props.timestamp}/${product.productId}.jpg`;
}
PDF OUTPUT
Any help would be much appreciated.
Note: These images are generated in the backend on the fly. So I can't import them.
I ran into the same issue and it seems to be an issue with react-pdf. It seems to be showing files with the .jpeg extension only
I'm having problem how can I able to generate links on twig view using the illuminate pagination. below is my codes.
Route:
$app->get('/', function ($request, $response) {
$data = Todo::paginate(5);
return $this->view->render($response, 'home.twig', [
'title' => 'Home',
'todolist' => $data,
]);
})->setName('homepage');
View:
{{todolist.links()}}
Error:
Call to a member function make() on null
btw I'm using Slim 3
Try this
Raw statement is to print the output as plain html (not text)
Refer to this link https://twig.sensiolabs.org/doc/2.x/filters/raw.html
{{todolist.links | raw}}
I tried on my slim 3 website and its works perfectly.
My Eloquent ver in the composer as below
"illuminate/database": "^5.2",
"illuminate/pagination": "~5.0"
If you're using Laravel pagination & Blade templates.
Try this in your blade file:
{{ $todolist->links() }}
Laravel docs: Displaying Pagination Results
Im working in a project using symfony, and I've a view in which i've to display an image of an entity, i used the same method of the upload recommanded by the documentation, the upload is working fine, but the problem I faced when I want to display the image, I get an exception as following :
A hash key must be followed by a colon (:). Unexpected token "punctuation" of value "." ("punctuation" expected with value ":") in StockStockBundle:Payantfournisseur:imprime.html.twig at line 135
There is the code that gives me this exception :
In the controller side :
$em = $this->getDoctrine()->getManager();
$entity = new Payantfournisseur();
$entity = $em->getRepository('StockStockBundle:Payantfournisseur')->find($id);
$user = $this->get('security.context')->getToken()->getUser();
$societe = new \User\UserBundle\Entity\Societe();
$societe = $em->getRepository('UserUserBundle:Societe')->find(2);
//$societe = $user->getSociete();
$facture = $entity->getIdfacturefournisseur();
$fournisseur = $facture->getIdfournisseur();
$articles = $em->getRepository('StockStockBundle:Lignefacturefournisseur')
->getArtFromLines($facture);
if (!$entity) {
throw $this->createNotFoundException('Unable to find Devis entity.');
}
$deleteForm = $this->createDeleteForm($id);
return $this->render('StockStockBundle:Payantfournisseur:imprime.html.twig', array(
'entity' => $entity,
'fournisseur' => $fournisseur,
'facture' => $facture,
'articles' => $articles,
'delete_form' => $deleteForm->createView(),
'societe' => $societe,
// 'ayoub'=>'yes ayoub',
));
In the view side :
<img src="{{ asset({societe.pjs.getWebPath}) }}" alt="{{ societe.pjs.alt }}" class="spaced img-responsive" />
to give more explaination, pjs is a oneToOne related entity with the societe, pjs is the entity responsible for the uploaded files.
If someone has an idea, plz it could be very helpful
thanks in advance!!!!!!!
I found parsing error in twig
Remove brace from asset function, use variable like here:
<img src="{{ asset(societe.pjs.getWebPath) }}" alt="{{ societe.pjs.alt }}" class="spaced img-responsive" />