很早之前想用 python 结合 PyQt5 实现一个 PDF 阅读工具，但是一直想不到如何预览PDF 文件的内容。
在网上搜索了很多答案，发现最多的就是 PyQt5 从零开始制作 PDF 阅读器 这边文章，看内容也就是实现了一个界面外观，核心的预览效果并没有实现，后面就是引导关注公众号的。
今天突然想做一个文件管理器，主要用来预览PDF 文件的，带有目录，可以选择对应的文件打开查看。
比如有个课件，里面有好几个文件夹，每次打开 pdf 文件都需要打开查找，非常麻烦。
其实如果会网页编程，非常简单快速的实现这个效果。
点击一个文件就可以打开预览，利用的其实是把浏览器当成 pdf 阅读工具，利用网页维护了左侧的文件目录。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>课件管理</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<ul id="sidebar" class="sidebar">
<li id="list" class="close"><span>1.书籍</span>
<ul>
<li><a href="1.书籍/《线性代数及其应用》.pdf" target="main">《线性代数及其应用》.pdf</a></li>
<li><a href="1.书籍/大话数据结构.pdf" target="main">大话数据结构.pdf</a></li>
<li><a href="1.书籍/编码的奥秘.pdf" target="main">编码的奥秘.pdf</a></li>
</ul></li>
<li id="list" class="close"><span>2.数据结构</span>
<ul>
<li><a href="2.数据结构/列表元组字符串-切片.pdf" target="main">列表元组字符串-切片.pdf</a></li>
<li><a href="2.数据结构/列表增删改查.pdf" target="main">列表增删改查.pdf</a></li>
<li><a href="2.数据结构/字典创建与操作.pdf" target="main">字典创建与操作.pdf</a></li>
</ul></li>
<li id="list" class="close"><span>3.数据分析</span>
<ul>
<li><a href="3.数据分析/1.Numpy入门.pdf" target="main">1.Numpy入门.pdf</a></li>
<li><a href="3.数据分析/2.Numpy数据存取.pdf" target="main">2.Numpy数据存取.pdf</a></li>
<li><a href="3.数据分析/3.Numpy常用函数.pdf" target="main">3.Numpy常用函数.pdf</a></li>
</ul></li>
</ul>
</div>
<div>
<iframe id="result-preview" frameborder="0" name="main"></iframe>
</div>
<script type="text/javascript">
var sidebar=document.getElementById("sidebar");
var lists=sidebar.querySelectorAll("#sidebar>li");
var spans=sidebar.querySelectorAll("#sidebar>li>span");
var uls=sidebar.querySelectorAll("#sidebar>li>ul");
spans.forEach(function (item,index) {
item.addEventListener('click', function(event){
lists[index].className=(lists[index].className=="open")?"close":"open";
uls[index].style.display= (lists[index].className=="open")?"block":"none";
}, false);
})
</script>
</body>
</html>如果有服务器就很好维护了，每次上传文件就可以了，服务器可以自动读取新加入的文件，更新网页内容。
不过就想用一个网页而已，怎样维护呢，也很简单，利用python 自动读取文件目录生成对应的 html 文件。
import os
# 网页开头
head = """<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>课件管理</title>
<link rel="stylesheet" href="style.css"/>
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<ul id="sidebar" class="sidebar">
"""
# 网页结尾
foot = """
</ul>
</div>
<div><iframe id="result-preview" frameborder="0" name="main"></iframe></div>
<script type="text/javascript">
var sidebar=document.getElementById("sidebar");
var lists=sidebar.querySelectorAll("#sidebar>li");
var spans=sidebar.querySelectorAll("#sidebar>li>span");
var uls=sidebar.querySelectorAll("#sidebar>li>ul");
spans.forEach(function (item,index) {
item.addEventListener('click', function(event){
lists[index].className=(lists[index].className=="open")?"close":"open";
uls[index].style.display= (lists[index].className=="open")?"block":"none";
}, false);
})
</script>
</body>
</html>
"""
# 中间新增内容
content = []
files = os.listdir()
for file in files:
if os.path.isdir(file):
sections_name = f"<li id='list' class='close'><span>{file}</span>"
content.append(sections_name)
content.append("<ul>")
sections = os.listdir(file)
for section in sections:
pdf_name = f"<li><a href='{file}/{section}' target='main'>{section}</a></li>"
content.append(pdf_name)
content.append("</ul>")
content.append("</li>")
# 写入内容到网页中
with open("课件管理首页.html","w",encoding="utf-8") as f:
f.write(head)
for line in content:
f.write(line)
f.write(foot)运行上面的文件，就可以自动读取目录生成网页文件，打开文件就可以访问了。
但是觉得这样还是挺 low 的，能不能利用 PySide2 做一个 UI界面呢，类似一个管理软件。
想了一下，实现目录什么都挺简单的，就是如何在UI界面预览PDF 难到我了，需要一个可以解析 pdf 的工具。整了好久没成功，突然想要 PySide2 内置了一个浏览器引擎， 可以打开网页，哪能不能利用UI界面打开之前的网页，实现一个类似的管理软件的。
PySide2 打开网页
代码语言：javascript复制from PySide2.QtWidgets import *
from PySide2.QtCore import QUrl
from PySide2.QtWebEngineWidgets import QWebEngineView
import os
app = QApplication([])
browser = QWebEngineView()
# 打开百度页面
# browser.load(QUrl('http://www.baidu.com'))
# 打开本地文件
browser.load(QUrl.fromLocalFile(os.path.realpath("课件管理首页.html")))
browser.show()
app.exec_()
确实可以打开网页，不过发现打不开 pdf 文件。也没有报错，找了好久答案，最终找到一个觉得可行的方案，说是需要配置PySide2的浏览器插件，并且对PySide2也有要求，需要5.15以上的版本。
代码语言：javascript复制settings = browser.settings()
settings.setAttribute(settings.PluginsEnabled, True)
settings.setAttribute(settings.PdfViewerEnabled, True)总算可以打开了，可是滚动不了PDF 文件。
并且出现了报错。
找了好久，终于在一个老外的网站上看到了解释，
因为我是在网页里面使用了 iFrame ，其实就是网页里面嵌入网页，导致出现了跨域的问题，就是两个网页是不同的域名。
既然这样，那我就不用两个网页，单独用浏览器显示显示 pdf 文件，用UI 界面实现目录。
这样总算搞定了，找到了一些图标，看上去还不错。
如果再加上一个登录注册界面，加上一些上传，删除，或者连到服务器上，就可以变成一个课件管理系统了。
(全文完)
欢迎转载，转载请注明出处！ 欢迎关注公众微信号：叶子陪你玩编程
