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

先看效果图&＃xff1a;

下面开始说代码
文件上传部分&＃xff1a;


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

<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地址]