热门标签 | 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地址]


推荐阅读
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法,通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点,并保持在文档树中。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
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社区 版权所有