基于jQuery生成PDF并保存至服务器及数据库存储相关信息的实现方案

我来帮你搞定这个需求！要实现这个功能，得分成前端传递PDF数据和后端存储+数据库写入两部分来做，下面一步步给你拆解：

一、前端代码修改：把PDF数据传给后端 #

原来的doc.save()是直接让浏览器下载文件，现在我们要把生成的PDF数据发送到后端接口，让服务器处理存储。这里有两种常用的传递方式：base64字符串或者Blob对象，下面分别给出示例：

方式1：传递Base64格式数据 #

jQuery(document).ready(function() {
  var doc = new jsPDF();
  doc.fromHTML(jQuery('#finalOutput').html(), 15, 15, { 'width': 180 });

  // 获取PDF的Base64字符串，去掉前缀只保留纯编码内容
  var pdfBase64 = doc.output('datauristring').replace('data:application/pdf;base64,', '');
  // 给文件名加时间戳避免重复
  var filename = 'sample-file-' + Date.now() + '.pdf';

  // 用jQuery AJAX发送到后端
  jQuery.ajax({
    url: '/save-pdf.php', // 替换成你的后端接口地址
    method: 'POST',
    data: {
      pdf_data: pdfBase64,
      filename: filename
    },
    success: function(res) {
      if (res.success) {
        alert('PDF已成功保存到服务器！');
        // 这里可以做后续操作，比如跳转查看记录
      } else {
        console.error('保存失败：', res.message);
      }
    },
    error: function(xhr) {
      console.error('请求出错：', xhr.responseText);
    }
  });
});

方式2：传递Blob对象（更适合大文件） #

如果生成的PDF比较大，用Blob传递更高效：

jQuery(document).ready(function() {
  var doc = new jsPDF();
  doc.fromHTML(jQuery('#finalOutput').html(), 15, 15, { 'width': 180 });

  var pdfBlob = doc.output('blob');
  var filename = 'sample-file-' + Date.now() + '.pdf';
  var formData = new FormData();
  formData.append('pdf_file', pdfBlob, filename);

  jQuery.ajax({
    url: '/save-pdf.php',
    method: 'POST',
    data: formData,
    processData: false, // 必须设置，避免jQuery处理FormData
    contentType: false, // 必须设置，让浏览器自动生成正确的Content-Type
    success: function(res) {
      if (res.success) {
        alert('PDF已成功保存到服务器！');
      } else {
        console.error('保存失败：', res.message);
      }
    },
    error: function(xhr) {
      console.error('请求出错：', xhr.responseText);
    }
  });
});

二、后端处理：保存文件+写入数据库 #

后端需要接收前端传来的PDF数据，保存到服务器目录，然后把文件名、下载路径等信息写入数据库。下面以PHP为例（你可以换成Node.js、Python等你熟悉的后端语言，逻辑是通用的）：

后端示例（PHP） #

创建save-pdf.php文件：

<?php
header('Content-Type: application/json');

// 1. 配置参数
$saveDir = './pdf-storage/'; // 服务器上的PDF存储目录
$domain = 'https://your-website.com'; // 你的网站域名，用于生成下载链接

// 2. 确保存储目录存在且有写入权限
if (!file_exists($saveDir)) {
  mkdir($saveDir, 0755, true);
}
if (!is_writable($saveDir)) {
  echo json_encode(['success' => false, 'message' => '存储目录没有写入权限']);
  exit;
}

// 3. 处理前端传来的数据（兼容Base64和Blob两种方式）
$filename = '';
$pdfContent = '';

// 处理Base64方式
if (isset($_POST['pdf_data'])) {
  $filename = $_POST['filename'] ?? 'default-' . time() . '.pdf';
  $pdfContent = base64_decode($_POST['pdf_data']);
}
// 处理Blob方式
elseif (isset($_FILES['pdf_file'])) {
  $file = $_FILES['pdf_file'];
  if ($file['error'] !== UPLOAD_ERR_OK) {
    echo json_encode(['success' => false, 'message' => '文件上传失败']);
    exit;
  }
  $filename = $file['name'];
  $pdfContent = file_get_contents($file['tmp_name']);
}
else {
  echo json_encode(['success' => false, 'message' => '没有收到有效数据']);
  exit;
}

// 4. 保存PDF到服务器
$filePath = $saveDir . $filename;
if (!file_put_contents($filePath, $pdfContent)) {
  echo json_encode(['success' => false, 'message' => '文件保存失败']);
  exit;
}

// 5. 生成客户端可访问的下载路径
$downloadPath = $domain . '/' . ltrim($saveDir, '.') . $filename;

// 6. 写入数据库（以MySQL为例）
// 先连接数据库
$dbHost = 'localhost';
$dbUser = 'your-db-username';
$dbPass = 'your-db-password';
$dbName = 'your-db-name';

$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
if ($conn->connect_error) {
  echo json_encode(['success' => false, 'message' => '数据库连接失败：' . $conn->connect_error]);
  exit;
}

// 预处理SQL语句，防止SQL注入
$stmt = $conn->prepare("INSERT INTO pdf_records (filename, download_path, created_at) VALUES (?, ?, NOW())");
$stmt->bind_param("ss", $filename, $downloadPath);

if ($stmt->execute()) {
  echo json_encode(['success' => true, 'message' => 'PDF保存并记录成功']);
} else {
  echo json_encode(['success' => false, 'message' => '数据库写入失败：' . $stmt->error]);
}

// 清理资源
$stmt->close();
$conn->close();
?>

三、数据库表结构参考 #

你需要先创建一个存储PDF记录的表，比如pdf_records，结构示例（MySQL）：

CREATE TABLE pdf_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  filename VARCHAR(255) NOT NULL,
  download_path VARCHAR(500) NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

关键注意事项 #

• 目录权限：确保服务器上的存储目录（比如pdf-storage）有写入权限，一般设置为0755（所有者可读可写可执行，组和其他可读可执行），不要用0777（不安全）。
• 文件名唯一：建议给文件名加上时间戳或唯一ID，避免不同用户生成的PDF覆盖彼此的文件。
• 安全防护：后端要验证传入的数据，防止恶意文件上传；使用预处理SQL语句避免SQL注入。
• 跨域问题：如果前端和后端不在同一域名下，需要在后端设置跨域允许头（比如Access-Control-Allow-Origin）。

内容的提问来源于stack exchange，提问作者Huzail Jamil