pythonflutterpdfflet

How to display a pdf page into a Flet container


I'm trying to develop a simple app for displaying each page of a Pdf file. Starting from a simple code, I add a container and a button. The Pdf file is uploaded from its full name (absolute path + file name) using a string variable. The file is suddenly converted into a list of PIL images using the pdf2image library. I'm trying to assign the first image (first element of the list) to the container content after a button is clicked. Here is the code:

import flet as ft
import pdf2image


def main(page: ft.Page):
    fullname = r'Your Full Path To the Doc.pdf'
    viewer = pdf2image.convert_from_path(fullname)

    def btn_Click(e):
        cont.content = ft.Image(src = viewer[0],
            fit=ft.ImageFit.FILL,
            )
        page.update()


    cont = ft.Container(height = 0.4*page.height,
        width = 0.4 * page.width,
        border=ft.border.all(3, ft.colors.RED),)

    btn = ft.IconButton(
        icon=ft.icons.UPLOAD_FILE,
        on_click=btn_Click,
        icon_size=35,)    


    page.add(ft.Column([cont, btn], 
        horizontal_alignment="center"))
    page.window_maximized = True
    page.horizontal_alignment = "center"
    page.scroll = ft.ScrollMode.AUTO
    page.update()

ft.app(target=main, assets_dir="assets")

Why nothing is displayed and no error occurs?


Solution

  • I moddify code to use base64 image src with flet i don't not why, but flet working bad with normal image src and use src_base64 is better choise.

    import flet as ft
    import pdf2image
    from io import BytesIO
    from PIL import Image as image
    import numpy as np
    import base64
    
    
    def main(page: ft.Page):
        fullname = r'Z:\Programy\PROGRAMY ŁUKASZ\__INSTRUKCJE\Kontur_rastra.pdf'
        viewer = pdf2image.convert_from_path(fullname, poppler_path=r'D:\Python\PDF-ORGANIZER\PDF2TIFF\poppler-24.02.0\Library\bin')
    
        viewer64 = []
        for view in viewer:
            arr = np.asarray(view)
            pil_img = image.fromarray(arr)
            buff = BytesIO()
            pil_img.save(buff, format="JPEG")
            pic = base64.b64encode(buff.getvalue()).decode("utf-8")
            viewer64.append(pic)
    
        def btn_Click(e):
            cont.content = ft.Image(src_base64=viewer64[0],
                fit=ft.ImageFit.FILL,
                )
            page.update()
    
    
        cont = ft.Container(height = 0.4* page.height,
            width = 0.4 * page.width,
            border=ft.border.all(3, ft.colors.RED),)
    
        btn = ft.IconButton(
            icon=ft.icons.UPLOAD_FILE,
            on_click=lambda e: btn_Click(e),
            icon_size=35,)
    
    
        page.add(ft.Column([cont, btn],
            horizontal_alignment=ft.MainAxisAlignment.CENTER))
        page.window_maximized = True
        page.horizontal_alignment = ft.MainAxisAlignment.CENTER
        page.scroll = ft.ScrollMode.AUTO
        page.update()
    
    ft.app(target=main, assets_dir="assets")
    

    Now your code working as i think you expect.

    Output of working code