FlutterMobile

PDF with Flutter – Part 2

By 8 June 2020 2 Comments

PDF with Flutter – Part 2

Sharing is caring!

PDF with Flutter – Part 2

In the part 1 of PDF with Flutter, we have seen how to generate pdf in flutter and view the same on mobile. Now, let’s see what are the stuffs available out there to view for Flutter Web.

As we have to deal with Flutter Web, you must have enabled web support for your flutter project. Please visit here for more info. If enabled successfully, you must get index.html file inside web folder:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidB18FE737-FBAC-8944-86CE-8222A529E08E.png

Viewing a generated PDF in Mobile

First, we will require the html package in order to interact with Web, such as for JavaScript. Flutter has the package dart:html, but its direct import is disallowed from Flutter v1.9 (see this). Luckily we have the package universal_html which we’re going to use here.

So far we have generated pdf as bytes array:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid19DC3BF4-5F38-984B-BE81-71ABDAC20953.png

Import univeral_html package at top:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidA0F1F848-1D5C-7D49-9F00-875AB084AF4C.png

Trial 1: Failed – Open PDF in new tab with Blob

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidC7DFCE84-BF13-3747-AF30-54FCA9C8ACF0.png

Here we use JavaScript’s blob accessed with ‘html.’ in flutter to get URL for given pdf bytes. We simply open the URL using ‘window.open()‘. The second parameter ‘_blank‘ is for new window.

Output: It opens up the new tab with the error popup.

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid6FAF0608-AD06-A940-B8E0-D3A505868A2E.png

Trial 2: Failed – Open PDF in new tab with Base64 

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid3705E71B-7669-4F4A-BB27-499EC9D8E41B.png

Here we just convert PDF bytes to a base64 String so that it can be pass to window.open() with specific format.

Output: It opens up the new BLANK window with no any error popup this time.

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidD30B1BA6-765E-B446-9B5B-4698288893F5.png

Trial 3: Success – forget new tab, welcome <iframe> 

Here we will be utilizing the index.html file inside web folder. The basic idea is to write html code there and trigger the click action from flutter code.

  1. <a> : with no extra style and text between it and enclosing </a>, otherwise it will get displayed unnecessarily on screen. We just set its ‘href’ attribute.
  1. <iframe> : to embed base64 PDF string and display the PDF.
  1. Bootstrap : to present in-app popup containing our PDF, and setting a click action on <a> tag.

The index.html file:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid63BA2680-0876-0C4C-9095-6EFE99C10BE9.png

 The flutter code

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidF43D9F50-77F4-E249-8C1A-674E7401B676.png
/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidA10E6FA0-BE0A-F445-AFEE-BAE25B24BE8F.png

Explanation:

  1. Get <div> tag using getElementById().
  2. Set <iframe> with base64 pdf data as innerHTMLof that <div> tag.
  3. Use NodeValidatorBuilderto allow iframe and its attributes(src, width, and height).
  4. Now that <iframe> is embedded with pdf data. Get <a> tag using getElementById().
  5. Trigger <a> mouse click event.

Output:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid35728AA3-240A-AE4E-9731-AC18BB715FB6.png

Congrats! We have successfully displayed the PDF for Flutter Web.

If you have PDF’s weblink, that also you can show with this approach. You just need to set the link as iframe source.

But, UI is too bad here as its not making use of whole screen and we need to scroll down to see the contents. Our next target is to show popup as full screen modal.

Get some hand on CSS

Add the class ‘modal-fullscreen’ to the <div> with modal class:

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cidCD91E224-0B39-B04C-9192-C06C8170012A.png

Add the below CSS rules inside <head>

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid9ACED4E7-D913-9945-A81F-EF58089D286A.png

Check again and see you get full screen PDF viewer for Flutter Web.

/var/folders/s0/x6b3609d7mbfp63z3b08jpn80000gn/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/cid3BDDF018-67E0-A84C-8D4F-19B4F82AA7A8.png

Get started with Bloom