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

来源：互联网发布：linux命令mkdir p 编辑：程序博客网时间：2024/04/29 21:00

先看效果图：

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

<!--引入几个依赖--><link href="/static/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /><script src="/static/js/canvas-to-blob.min.js" type="text/javascript"></script><script src="/static/js/sortable.min.js" type="text/javascript"></script><script src="/static/js/purify.min.js" type="text/javascript"></script><script src="/static/js/fileinput.js"></script><script src="/static/js/zh.js"></script><script src="/static/js/pt-BR.js"></script><script src="/static/js/theme.js"></script><script src="/static/js/LANG.js"></script><!--初始化一个上传组件--><script type="application/javascript">    function initFileInput(ctrlName, uploadUrl) {        var control = $('#' + ctrlName);        control.fileinput({            language: 'zh', //设置语言            uploadUrl: uploadUrl, //上传的地址            allowedFileExtensions : ['pdf'],//接收的文件后缀            showRemove: false,            showZoom: false,            showCaption: false,//是否显示标题            browseClass: "btn btn-primary", //按钮样式            previewFileIconSettings: {                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>'            }        });    }</script><div style="width:50%; padding-top: 5%">    <label class="control-label">Select File</label    <input id="file-Portrait" type="file" class="file" data-preview-file-type="text">    <script>        initFileInput("file-Portrait", "/api/upload");    </script></div>

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

在线查看部分
先看一下这里要用到的pdf.js的组织结构（这个很重要）
组织结构1

组织结构2

组织结构3

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

@app.route('/show', methods=["GET"])def show_test():    return render_template("show.html")

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

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

[demo地址]

0 0