当前位置：首页 > article >正文

Python+VUE生成PDF小案例

article 2024/9/19 9:30:58

首先，我们需要准备工作环境：

安装 Python3，并安装需要的第三方库 flask 和 pdfkit
下载并安装 wkhtmltopdf 工具

接下来就可以进入到程序设计阶段了。步骤如下：

在 Vue.js 中设置表单项制作 PDF 的数据；
在前端使用 Axios 发送请求将 JSON 数据发送至后端 Flask 服务器;
后端通过 Flask 接收JSON数据,并调用 pdfkit 库将 HTML 模板转换为证明文件 PDF；
将 PDF 文件返回给前端进行下载或打印等操作。

Python 后台服务示例（Flask）：

from flask import Flask, request
import pdfkit   # 主要负责 Html -> Pdf 相关处理

app = Flask(__name__)

@app.route('/generate_pdf', methods=['POST'])
def generate_pdf():
    req_data = request.get_json()
    
    # 解析传入参数 
    name = req_data['name']
    age = req_data['age']

    # 创建PDF文档HTML模板 
    html_template = f"""
      <html>  
        <head>  
          <meta charset="UTF-8"> 
          <title>Hello World</title>
        </head>
          
        <body style="width:800px;margin:0 auto;font-size:14px;">
            姓名： {name} ，年龄： {age}
        </body>
      </html>"""

     # 调用PdfKit库进行Html → Pdf 转换处理 
    pdf_file = pdfkit.from_string(html_template, False)

     # 返回生成的PDF文件数据 
    response = make_response(pdf_file)
    response.headers['Content-Type'] = 'application/pdf'
    return response

Vue.js 代码，用于触发 PDF 生成请求：

<template>
  <div class="generate-pdf">
      <button type="submit" @click.prevent="generatePdf">生成PDF</button>
 </div>
</template>

<script>
import axios from 'axios';

export default {
   name: "GeneratePdf",
   methods: {   
       generatePdf() {
           axios.post('/generate_pdf', this.formData,{
               responseType: 'arraybuffer',
           }).then(response => {
              let blobUrl= window.URL.createObjectURL(new Blob([response.data]));
              window.open(blobUrl);
          }).catch(err => alert('无法生成证明'));
       }
   },
}
</script>