• 039-第三代软件开发-PDF阅读器


    头图

    第三代软件开发-PDF阅读器


    关键字: QtQmlpdfLTDev本地

    项目介绍

    欢迎来到我们的 QML & C++ 项目!这个项目结合了 QML(Qt Meta-Object Language)和 C++ 的强大功能,旨在开发出色的用户界面和高性能的后端逻辑。

    在项目中,我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件,我们能够迅速开发出丰富多样的界面效果和动画效果。同时,我们利用 QML 强大的集成能力,轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

    在后端方面,我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言,能够提供卓越的性能和可扩展性。我们的团队致力于优化代码,减少资源消耗,以确保我们的项目在各种平台和设备上都能够高效运行。

    无论您是对 QML 和 C++ 开发感兴趣,还是需要我们为您构建复杂的用户界面和后端逻辑,我们都随时准备为您提供支持。请随时联系我们,让我们一同打造现代化、高性能的 QML & C++ 项目!

    重要说明☝

    ☀该专栏在第三代软开发更新完将涨价

    PDF阅读器

    同上篇【038_第三代软件开发-简易视频播放器自定义Slider (二)】一样,这个功能就是为了显示我们的软件说明书。同样适用平率不怎么搞,而QML本身好像不怎么具备PDF文件的预览的。这里我最开始向导的就是使用web来实现,并且我真的非常非常认真的让GPT给我写了一个H5,我在Google浏览器里面测试没有问题。代码如下:

    DOCTYPE html>
    <html>
    <head>
        <title>打开和预览本地PDF文件title>
    head>
    <body>
        <input type="file" id="pdfInput" accept=".pdf">
        <embed id="pdfPreview" type="application/pdf" width="100%" height="600px">
    
        <script>
            document.getElementById('pdfInput').addEventListener('change', function(e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('pdfPreview').setAttribute('src', e.target.result);
                };
                reader.readAsDataURL(file);
            });
        script>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在上述示例中,我们使用了元素来创建一个选择文件的输入框,并通过添加accept=".pdf"来限制只能选择PDF文件。接下来,我们使用元素来创建一个用于预览PDF文件的窗口。

    当用户选择一个PDF文件后,change事件将被触发。我们在事件处理程序中获取用户选择的文件对象,并创建一个FileReader对象来读取文件内容。读取完成后,我们将结果(即PDF文件的数据URL)赋值给标签的src属性,以便在窗口中预览PDF文件。

    请注意,由于安全限制,Web浏览器可能会阻止直接在页面中预览本地文件。因此,这个示例可能在某些浏览器中无法正常工作。

    但是呢,当我把这个放到Qt里面的时候,发现无法使用,所以我转向的万能的github。最后,我发现了一个线程的轮子可以用,很遗憾的是我没有存链接,我好找了一圈,也没有再次找到,也没有fork 一下。所以我把目前的这部分代码打包了一下,上传了,0积分下载,大家可以直接下载使用。

    链接地址:https://download.csdn.net/download/z609932088/88171703?spm=1001.2014.3001.5503

    1 初始化PDF view

    首先我们需要在main.cpp里面包含头文件

    #include 
    
    #include "it/ltdev/qt/cpp/components/qtpdfviewerinitializer.h"
    
    • 1
    • 2
    • 3

    紧接着需要咋我们的QApplication创造前完成初始化

    LTDev::QtPdfViewerInitializer::initialize(); 		
    
    • 1

    在完成QApplication初始化后链接QApplication结束信号槽

    QObject::connect(&app, &QApplication::aboutToQuit, LTDev::QtPdfViewerInitializer::getInstance(), LTDev::QtPdfViewerInitializer::deleteInstance);
    
    • 1

    完成以上基本,这里我们可以编译一下,看下是否存在问题,存在修复即可,不存在,就可以在QML中包含对应模块,使用了。

    2 qml 中使用

    首先同样,需要在qml import相关模块,最后一个就是我们的pdf模块

    import QtWebView 1.15
    import QtWebEngine 1.10
    import it.ltdev.qt.qml.components 1.0 as LTDev
    
    • 1
    • 2
    • 3

    3 创建模块

    这部分就可以把它当做有个普通的控件来使用就可以了,重要的我在注释中也说了,在ubuntu 下是需要–no-sandbox参数运行程序的。

    /*
        WebView 模块运行需要加 --no-sandbox参数
        --no-sandbox 参数不能使用 gdb调试,如果要使用gdb 调试,可以先把这个注释掉,这个就是一个展示帮助文档的PDF
      */
      LTDev.PdfView {
          id: pdfView
          anchors.fill: parent
          visible: true
          onError: {
              pdfView.visible = false
              pdfView.opacity = 0
              var json = JSON.parse(message)
          }
          onViewerLoaded: {
              pdfView.load("/home/UserHelp.pdf")
          }
          onPdfLoaded: {
              pdfView.visible = true
              pdfView.opacity = 1
          }
      }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    博客签名2021
  • 相关阅读:
    【IT行业就业前景广阔:探讨热门方向与就业机会】
    嵌入式-原码、补码,反码的存储
    贪心算法实现规定长度范围的字符串增删改
    OMC IT监控运维管理平台建设方案
    docker 安装rabbitmq并配置hyperf使用
    IMX6ULL学习笔记(5)——获取和编译U-Boot
    TCR历史期刊为何受大家欢迎?
    76-SpringSecurity介绍
    [Angular 基础] - 表单:响应式表单
    关于智能空气动力学
  • 原文地址:https://blog.csdn.net/z609932088/article/details/134097291