Python+VUE生成PDF小案例

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

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

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

1. 在 Vue.js 中设置表单项制作 PDF 的数据；
2. 在前端使用 Axios 发送请求将 JSON 数据发送至后端 Flask 服务器;
3. 后端通过 Flask 接收JSON数据,并调用 pdfkit 库将 HTML 模板转换为证明文件 PDF；
4. 将 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"""
        
          
           
          
        
          
        
            姓名： {name} ，年龄： {age}
        
"""
# 调用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">生成PDFbutton>
 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>

以上代码分别为后端 Flask 和前端 Vue 中处理PDF相关功能的核心部分示例。这里我们采用总体都很简单、易读性较高等特点非常适合初学者尝试入门。

要使用它，请确保本机已经安装好上述工具依赖项，如果遇到问题请查阅文档或进行咨询获取帮助。