如何下载Google Chart API生成的二维码？PHP与jQuery实现求助

问题分析 #

你的现有代码存在几个关键问题：

• 前端codeFile是JS变量，后端PHP无法直接读取，导致file_get_contents获取不到有效资源
• PHP代码直接嵌在页面中，页面加载时就会执行，并非点击下载按钮才触发
• 下载按钮是普通按钮，未触发表单提交或下载请求
• 路径/path/to/save/img/是占位符，未设置服务器实际可写路径

修正方案 #

1. 修改前端代码（HTML+JS） #

调整表单和按钮，让下载操作能把员工ID传递给PHP：

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title"><b><span class="employee_id"></span></b></h4>
    </div>
    <div class="modal-body">
      <!-- 表单指向专门的下载脚本 -->
      <form class="form-horizontal" method="POST" action="download_qr.php">
        <input type="hidden" class="empid" name="id" value="">
        <div class="qr-code text-center">
          <p>QR CODE</p>
          <h2 class="del_employee_name" style="font-family: arial black;"></h2>
          <img class="codeimg" height="200px" width="200px">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
          <!-- 改为submit类型，触发表单提交 -->
          <button type="submit" class="btn btn-primary btn-flat" name="download"><i class="fa fa-download"></i>下载</button>
        </div>
      </form>
    </div>
  </div>
</div>

配套JS代码，确保员工ID填入隐藏输入框：

// 假设response是接口返回的员工数据
const employeeId = response.employee_id;
// 更新二维码图片
document.querySelector('.codeimg').setAttribute('src', `https://chart.googleapis.com/chart?cht=qr&chl=${employeeId}&choe=UTF-8&chs=500x500`);
// 把员工ID传给PHP
document.querySelector('.empid').value = employeeId;

2. 编写PHP下载脚本（download_qr.php） #

单独创建脚本处理下载逻辑：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id'])) {
    $employeeId = $_POST['id'];
    // 构造完整的Google Chart API链接，用urlencode处理特殊字符
    $qrUrl = "https://chart.googleapis.com/chart?cht=qr&chl=" . urlencode($employeeId) . "&choe=UTF-8&chs=500x500";
    
    // 获取二维码内容
    $qrImage = file_get_contents($qrUrl);
    if (!$qrImage) {
        die("无法获取二维码");
    }
    
    // 设置响应头，触发浏览器下载
    header('Content-Type: image/png');
    header('Content-Disposition: attachment; filename="qr_code_' . $employeeId . '.png"');
    header('Content-Length: ' . strlen($qrImage));
    
    // 输出图片
    echo $qrImage;
    exit;
} else {
    die("无效请求");
}
?>

注意事项 #

• 确保服务器允许file_get_contents访问外部URL（若禁用，可改用cURL实现）
• 无需将图片保存到服务器本地，直接输出给浏览器更高效
• 用urlencode处理员工ID，避免特殊字符破坏URL结构

内容的提问来源于stack exchange，提问作者Dionysus Fertility