search

DavBfr / dart_pdf

Pdf creation module for dart/flutter
https://pub.dev/packages/pdf
Apache License 2.0
1.42k stars 633 forks source link

PDF created in a flutter Mobile App isn't loading on a Web Application #288

Closed abhishek110597 closed 4 years ago

abhishek110597 commented 4 years ago

I am new to flutter developing an app to upload images as pdf. The mobile app captures images via the camera, converts it into a pdf and uploads the file into a s3 bucket. I created the pdf in the Mobile App using this "https://pub.dev/packages/pdf". The file is been uploaded successfully, i am facing an issue whilst downloading or viewing it using the Web Application (written in Angular). This issue exists with only flutter created pdf as it works fine with pdf uploaded via the Web Application. I can download the file directly from the s3 bucket and view it without an issue. The issue exists only with viewing within the web app or while downloading it via the Web Application. Can someone help me with this?

DavBfr commented 4 years ago

What pdf library do you use in angular?

abhishek110597 commented 4 years ago

No library used in angular, we are just opening the pdf via the browser

0xdhu commented 4 years ago

hi @abhishek110597 can you share your flutter doctor -v?

abhishek110597 commented 4 years ago
flutter doctor
0xdhu commented 4 years ago

ok. "The mobile app captures images via the camera, converts it into a pdf". when you created pdf with your image from camera, maybe it will be exported to your phone. from your phone, can you make sure that the pdf is working for view? and can you share that scrip part?

DavBfr commented 4 years ago

@abhishek110597 can you attach one of the pdf files?

abhishek110597 commented 4 years ago

1588234555920.pdf @DavBfr this is a simple pdf created using the emulator that i downloaded directly from the s3 bucket, but the same pdf can't be viewed on a Web browser

abhishek110597 commented 4 years ago
pdf issue

This is what i see on the browser when i try to view it.

abhishek110597 commented 4 years ago

void savePdf(pw.Document pdf) async { String dir = (await getApplicationDocumentsDirectory()).path; pdfPath = "$dir/" + DateTime.now().millisecondsSinceEpoch.toString() + ".pdf"; pdfFile = File(pdfPath.toString()); await pdfFile.writeAsBytes(pdf.save()); }

void addImage(pw.Document pdf) async { this.setState(() { imageFile = image; }); final imagePdf = PdfImage.file( pdf.document, bytes: imageFile.readAsBytesSync(), ); pdf.addPage(pw.Page( pageFormat: PdfPageFormat.a4, build: (pw.Context context) { return pw.Center( child: pw.Image(imagePdf), ); })); //print('################ Image added'); }

pw.Document createPDF() { pw.Document pdfDoc = new pw.Document(); final imagePdf = PdfImage.file(pdfDoc.document, bytes: imageFile.readAsBytesSync()); //print('################# PDF Created'); pdfDoc.addPage(pw.Page( pageFormat: PdfPageFormat.a4, build: (pw.Context context) { return pw.Center( child: pw.Image(imagePdf), ); })); return pdfDoc; }

@monkeyMax-SVG This is majority of the code related to creating, adding pages to the pdf and saving it which is later uploaded into the s3 bucket. The Mobile app is fairly simple. It lets the user either click pictures or choose from the gallery, uploads the file when the upload button is pressed

DavBfr commented 4 years ago

@abhishek110597 this pdf works correctly on Chrome and Firefox. Maybe it's your code to download it from S3 that adds some content to the file.

0xdhu commented 4 years ago

I think it is from amazon s3 bucket permission. when upload pdf to s3 bucket, maybe there is option if you want to make the pdf as public or not. I think you need to make sure that you uploaded file as public permission.

I have ever developed Django and angular with Aws s3 and API 2months ago. At that time, when I upload image to s3 bucket, I gave public permission to that image file. So when I show that image file to WebFront(Angular), it works great. Otherwise, webfront didnot show image.

I think it is same case of you.