如何将 pdf 页面显示到 Flet 容器中

Question

我正在尝试开发一个简单的应用程序来显示 Pdf 文件的每一页。从简单的代码开始，我添加了一个容器和一个按钮。 Pdf 文件是使用字符串变量从其全名（绝对路径+文件名）上传的。该文件突然使用 pdf2image 库转换为 PIL 图像列表。 我试图在单击按钮后将第一个图像（列表的第一个元素）分配给容器内容。 这是代码：

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")

为什么没有任何显示，也没有出现错误？

Answer 1

我修改代码以使用base64图像src与

flet

我不知道为什么，但是

flet

使用普通图像src效果不好并且使用src_base64是更好的选择。

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")

现在你的代码可以按照我的预期工作了。