首先,我们需要准备工作环境:
- 安装 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>
以上代码分别为后端 Flask 和前端 Vue 中处理PDF相关功能的核心部分示例。这里我们采用总体都很简单、易读性较高等特点非常适合初学者尝试入门。
要使用它,请确保本机已经安装好上述工具依赖项,如果遇到问题请查阅文档或进行咨询获取帮助。