热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flask基于pdf.js的pdf在线阅读

先看效果图:下面开始说代码文件上传部分:

先看效果图:
效果图

下面开始说代码
文件上传部分:


<link href&#61;"/static/css/fileinput.css" media&#61;"all" rel&#61;"stylesheet" type&#61;"text/css" />
<script src&#61;"/static/js/canvas-to-blob.min.js" type&#61;"text/Javascript">script>
<script src&#61;"/static/js/sortable.min.js" type&#61;"text/Javascript">script>
<script src&#61;"/static/js/purify.min.js" type&#61;"text/Javascript">script>
<script src&#61;"/static/js/fileinput.js">script>
<script src&#61;"/static/js/zh.js">script>
<script src&#61;"/static/js/pt-BR.js">script>
<script src&#61;"/static/js/theme.js">script>
<script src&#61;"/static/js/LANG.js">script>

<script type&#61;"application/Javascript">function initFileInput(ctrlName, uploadUrl) {var control &#61; $(&#39;#&#39; &#43; ctrlName);control.fileinput({language: &#39;zh&#39;, //设置语言uploadUrl: uploadUrl, //上传的地址allowedFileExtensions : [&#39;pdf&#39;],//接收的文件后缀showRemove: false,showZoom: false,showCaption: false,//是否显示标题browseClass: "btn btn-primary", //按钮样式previewFileIconSettings: {&#39;pdf&#39;: &#39;&#39;}});}
script><div style&#61;"width:50%; padding-top: 5%"><label class&#61;"control-label">Select Filelabel
<input id&#61;"file-Portrait" type&#61;"file" class&#61;"file" data-preview-file-type&#61;"text"><script>initFileInput("file-Portrait", "/api/upload");script>
div>

UPLOAD_FOLDER &#61; &#39;./static/doc&#39;
app.config[&#39;UPLOAD_FOLDER&#39;] &#61; UPLOAD_FOLDER # 设置文件上传的目标文件夹&#64;app.route("/api/upload", methods&#61;["GET", "POST"])
def upload():file &#61; request.files.get("file_data")msg &#61; api_upload(app, file)upload_msg &#61; json.loads(msg.data.decode("utf-8"))errmsg &#61; upload_msg.get("errmsg")return jsonify({"msg": errmsg})def api_upload(app_boj, file):basedir &#61; os.path.abspath(os.path.dirname(__file__)) # 获取当前项目的绝对路径file_dir &#61; os.path.join(basedir, app_boj.config[&#39;UPLOAD_FOLDER&#39;]) # 拼接成合法文件夹地址if not os.path.exists(file_dir):os.makedirs(file_dir) # 文件夹不存在就创建fname &#61; file.filenameext &#61; fname.rsplit(&#39;.&#39;, 1)[1] # 获取文件后缀unix_time &#61; int(time.time())new_filename &#61; str(unix_time)&#43;&#39;.&#39;&#43;ext # 修改文件名file.save(os.path.join(file_dir, new_filename)) #保存文件到upload目录return jsonify({"result": 1, "new_name": new_filename, "errmsg": "上传成功"})

在线查看部分
先看一下这里要用到的pdf.js的组织结构&#xff08;这个很重要&#xff09;
组织结构1

组织结构2

组织结构3

<div class&#61;"container"><div class&#61;"row"><div class&#61;"col-lg-9 col-lg-offset-2" style&#61;"height: 595px"><iframe class&#61;"frame_style" src&#61;"http://127.0.0.1:5000/static/pdfjs/web/viewer.html?file&#61;\static\doc\1481953691.pdf">iframe>div>div>
div>

&#64;app.route(&#39;/show&#39;, methods&#61;["GET"])
def show_test():return render_template("show.html")

按照前面的组织结构组织好pdf.js之后&#xff0c;重点就在iframe的src部分了。这里为了方便演示写死的&#xff0c;可以作为参数传入&#xff0c;就能够实现点击文档在线查看了。

最后放上这个demo的git地址&#xff0c;可以下载pdf.js的部分&#xff0c;嵌入任何语言都一样使用。

[demo地址]


推荐阅读
  • 本文详细介绍了在使用 SmartUpload 组件进行文件上传时,如何正确配置和查找文件保存路径。通过具体的代码示例和步骤说明,帮助开发者快速解决上传路径配置的问题。 ... [详细]
  • 帝国CMS多图上传插件详解及使用指南
    本文介绍了一款用于帝国CMS的多图上传插件,该插件通过Flash技术实现批量图片上传功能,显著提升了多图上传效率。文章详细说明了插件的安装、配置和使用方法。 ... [详细]
  • 为了解决不同服务器间共享图片的需求,我们最初考虑建立一个FTP图片服务器。然而,考虑到项目是一个简单的CMS系统,为了简化流程,团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 掌握远程执行Linux脚本和命令的技巧
    本文将详细介绍如何利用Python的Paramiko库实现远程执行Linux脚本和命令,帮助读者快速掌握这一实用技能。通过具体的示例和详尽的解释,让初学者也能轻松上手。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 本文介绍了如何通过 Maven 依赖引入 SQLiteJDBC 和 HikariCP 包,从而在 Java 应用中高效地连接和操作 SQLite 数据库。文章提供了详细的代码示例,并解释了每个步骤的实现细节。 ... [详细]
  • 本文介绍了如何使用PHP代码实现微信平台的媒体素材上传功能,详细解释了API接口的使用方法和注意事项,确保文件路径正确以避免常见的错误。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
  • 本文详细介绍了 Flink 和 YARN 的交互机制。YARN 是 Hadoop 生态系统中的资源管理组件,类似于 Spark on YARN 的配置方式。我们将基于官方文档,深入探讨如何在 YARN 上部署和运行 Flink 任务。 ... [详细]
  • 解决FCKeditor应用主题后上传问题及优化配置
    本文介绍了在Freetextbox收费后选择FCKeditor作为替代方案时遇到的上传问题及其解决方案。通过调整配置文件和调试工具,最终解决了上传失败的问题,并对相关配置进行了优化。 ... [详细]
author-avatar
瑶2012瑶_881
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有