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

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

文章目录

第三代软件开发-PDF阅读器
- 项目介绍
- PDF阅读器
- - [1 初始化PDF view](#1 初始化PDF view)
  - [2 qml 中使用](#2 qml 中使用)
  - [3 创建模块](#3 创建模块)

关键字： Qt、 Qml、 pdf、 LTDev、 本地

项目介绍

欢迎来到我们的 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浏览器里面测试没有问题。代码如下：

html 复制代码

<!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>

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

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

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

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

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

1 初始化PDF view

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

C++ 复制代码

#include <QtWebView/QtWebView>

#include "it/ltdev/qt/cpp/components/qtpdfviewerinitializer.h"

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

C++ 复制代码

LTDev::QtPdfViewerInitializer::initialize();

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

C++ 复制代码

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

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

2 qml 中使用

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

qml 复制代码

import QtWebView 1.15
import QtWebEngine 1.10
import it.ltdev.qt.qml.components 1.0 as LTDev

3 创建模块

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

qml 复制代码

/*
    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
      }
  }