Flask PDF预览|极客教程

Flask PDF预览

在Web开发中，经常会遇到需要生成PDF文件并在网页上进行预览的需求。Flask作为一个轻量级的Python Web框架，可以很好地实现这个功能。本文将详细介绍如何使用Flask生成和预览PDF文件。

准备工作

在开始之前，我们需要安装相关的库。首先确保已安装Flask和Werkzeug，然后通过pip安装pdfkit和wkhtmltopdf。

pip install Flask
pip install pdfkit
pip install wkhtmltopdf

pdfkit是一个Python库，用于将HTML内容转换为PDF文件。而wkhtmltopdf是一个命令行工具，用于将HTML文件转换为PDF。pdfkit内部调用wkhtmltopdf来实现PDF文件的生成。

生成PDF文件

首先，我们需要创建一个Flask应用，并编写一个路由用于生成PDF文件。创建一个名为app.py的文件，编写如下内容：

from flask import Flask, render_template, make_response
import pdfkit

app = Flask(__name__)

@app.route('/')
def index():
    html = render_template('index.html')
    pdf = pdfkit.from_string(html, False)

    response = make_response(pdf)
    response.headers['Content-Type'] = 'application/pdf'
    response.headers['Content-Disposition'] = 'inline; filename=output.pdf'

    return response

if __name__ == '__main__':
    app.run()

在上面的代码中，我们定义了一个index路由，该路由会渲染名为index.html的模板，并将其转换为PDF文件。最后返回生成的PDF文件。

接下来，我们需要创建一个名为templates的文件夹，并在里面创建一个名为index.html的模板文件。在index.html文件中编写需要转换为PDF的HTML内容。例如：

<!DOCTYPE html>
<html>
<head>
    <title>PDF Preview</title>
</head>
<body>
    <h1>PDF Preview</h1>
    <p>This is a sample PDF preview.</p>
</body>
</html>

预览PDF文件

现在我们已经实现了生成PDF文件的功能，接下来就是如何在网页上进行预览。为了实现预览功能，我们可以借助pdf.js这个开源库。

首先，在index.html文件中引入pdf.js的相关文件：

<!DOCTYPE html>
<html>
<head>
    <title>PDF Preview</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
    <h1>PDF Preview</h1>
    <p>This is a sample PDF preview.</p>
    <div>
        <canvas id="pdfCanvas"></canvas>
    </div>
    <script>
        const pdfUrl = '/';  // PDF文件的URL

        // 创建PDFJS对象
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

        // 渲染PDF文件
        const renderPDF = async () => {
            const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
            const page = await pdf.getPage(1);
            const canvas = document.getElementById('pdfCanvas');
            const viewport = page.getViewport({ scale: 1 });
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            const renderContext = {
                canvasContext: canvas.getContext('2d'),
                viewport: viewport
            };
            await page.render(renderContext).promise;
        };

        renderPDF();
    </script>
</body>
</html>