PHP+jQuery开发的二维码生成站点图片下载失败问题求解

核心问题&对应修复步骤 #

1. 修复下载路径错误（最直接导致下载失败的原因） #

当前下载逻辑中拼接的路径为localhost/qrCodeGenerator/开头，缺少http:///https://协议头，浏览器会将其识别为相对路径，无法正常请求资源。直接使用图片的相对路径即可，无需拼接域名前缀。

2. 解决PHP端文件未写入完成就返回的问题 #

在PHP生成二维码后增加文件校验逻辑，确认文件写入完成、大小正常再返回前端，修改后代码如下：

include_once "../phpqrcode/qrlib.php";
$PNG_TEMP_DIR  = '../qrcodeImages/';
// 自动创建目录，避免目录不存在导致写入失败
if (!file_exists($PNG_TEMP_DIR)) {
    mkdir($PNG_TEMP_DIR, 0755, true);
}
if (isset($_REQUEST['text'])) {
    $content = $_REQUEST['text'];
    $filename = $PNG_TEMP_DIR . 'qr' . md5($content) . '.png';
    QRcode::png($content, $filename, 10);
    // 清除文件状态缓存，校验文件是否生成成功
    clearstatcache();
    if (file_exists($filename) && filesize($filename) > 0) {
        echo "<img class='img' src='qrcodeImages/" . basename($filename) . "'/>";
    } else {
        echo "generate_fail";
    }
};

3. 避免前端图片未加载完成就触发下载 #

在AJAX请求时控制下载按钮状态，只有图片加载完成后才允许点击下载，修改后AJAX代码如下：

$.ajax({
   url: "code/single_input_to_qrcode.php",
   type: "POST",
   data: { text: jquery_plain_text },
   beforeSend: () => {
       // 请求过程中禁用下载按钮，防止提前点击
       $('#downloadBtn').prop('disabled', true);
   },
   success: (parms) => {
      if (parms === 'generate_fail') {
          alert('二维码生成失败，请重试');
          return;
      }
      $("#downloadPart_img img").remove();
      const $newImg = $(parms);
      // 监听图片加载完成事件，加载完成后再启用下载按钮
      $newImg.on('load', () => {
          $('#downloadBtn').prop('disabled', false);
      })
      $("#downloadPart_img").append($newImg);
   }
});

4. 优化FileSaver下载兼容性 #

直接传入网络地址给saveAs方法存在跨域、浏览器安全限制等问题，先将图片转成Blob格式再调用下载接口，兼容性更好，修改后下载逻辑代码如下：

var url = $("#downloadPart_img img").attr('src');
if (url == "img/white-qr-code.png") {
    $("#error_msg_div").animate({ "top": "20px" });
    error_msg = "Please generate a QR code before download";
    error_msg_div.html(error_msg);
} else {
    var file_name = url.substring(url.lastIndexOf('/') + 1);
    // 转Blob后再下载
    fetch(url)
        .then(res => res.blob())
        .then(blob => {
            saveAs(blob, file_name);
        })
        .catch(() => {
            alert('下载失败，请稍后重试');
        })
}

额外注意事项 #

• 线上部署时无需拼接localhost域名，直接使用相对路径即可正常访问
• 请确保qrcodeImages目录的读写权限正常，避免PHP写入文件失败

内容的提问来源于stack exchange，提问作者Umair Mustafa