Question

当我运行没有ajax作为GET请求的php脚本时，我的代码工作正常。我被提示下载渲染的pdf，一切都很顺利。但是，我需要使用ajax，因为我需要从一个html页面发送更多信息到PHP脚本，而不是在GET请求中处理。

我需要将哪些内容放入我的ajax才能使其正常工作？

谢谢

JS

function makePDF()
{
var x;
if(window.event) // IE8 and earlier
    {
    x=event.keyCode;
    }
else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
    {
    x=event.which;
    }
keychar=String.fromCharCode(x);

alert(keychar);

if (keychar == 'p' || keychar == 'P')
{
    var charSheetHTML = characterSheet.innerHTML;

    $.ajax({ 
     url: 'pdf.php',
     data: {'charactersheet': charSheetHTML,},
     type: 'post',
     success: function (data) {**WHAT_DO_I_PUT_HERE??**},
     error: function (data) { alert("error\n" + data.toString()); }
    });
}
}

pdf.php

<?php
include_once( "bxcharacter/PDFChar.php.inc" );
PDFChar();  
?>

PDFChar.hph.inc

<?php

require_once('./tcpdf/tcpdf.php');

function PDFChar(){


 $pdf = new TCPDF();


 $pdf->AddPage('P');
 $pdf->writeHTML($_POST['charactersheet']);


 $pdf->Output("character.pdf", 'D');


}

?>

Answer 1

这不是ajax解决方案，但您可以通过这种方式发送数据，如果没有错误发生，您的网页就不会发生变化。

创建一个隐藏输入的表单元素，其中包含您要发送的数据：

示例格式：

<form id="myForm" method="GET" action="pdf.php">
   <input type="hidden" name="data1" type="hidden" value="your JSON.stringify() data">
</form>

js代码（调用你的ajax请求的地方）：

var myForm =  '<form id="myForm" method="GET" action="pdf.php">';
    myForm += '<input type="hidden" name="data1" type="hidden" value="JSON.stringify() data">';
    myForm += '</form>';

$("body").append(myForm);   // temporarily appending 
$("#myData-form").submit(); // submitting form with data
$("#myData-form").remove(); // remove form after submit

正如您所说，强制下载将强制下载文件，页面将保持不变。但是，如果发生错误，您的页面当然会改变。

我不知道这是否是一种有效的方法，但就我而言，这就是诀窍。

Answer 2

一个老问题，但是我试图用Laravel PDF扩展名做类似的事情，却偶然发现了这个问题。在出色的博客文章的帮助下，我确实成功地异步完成了此操作

https://nehalist.io/downloading-files-from-post-requests/

https://github.com/nehalist/download-post-requests

使用form方法，就像前面的答案一样，也可以正常工作，但这也许可以帮助其他尝试使用AJAX实现此目的的人。作者的XMLHttpRequest方法对我来说非常有用！

最适合我的代码（几乎逐字记录在博客文章中）->

document.getElementById('exportpdf').addEventListener('click', function () {
  var request = new XMLHttpRequest();
  request.open('POST', '/your/post/endpoint/here', true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  request.responseType = 'blob';

  request.onload = function() {

  if(request.status === 200) {
    var disposition = request.getResponseHeader('content-disposition');
    var matches = /"([^"]*)"/.exec(disposition);
    var filename = (matches != null && matches[1] ? matches[1] : 'file.pdf');

    var blob = new Blob([request.response], { type: 'application/pdf' });
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
  } 
};

我试图使其与jQuery AJAX一起使用，但是失败了，所以我使用了XMLHttpRequest。使用jQuery，可以进行下载，但内容始终为空。我试图在这篇文章中做类似的事情-

https://keyangxiang.com/2017/09/01/HTML5-XHR-download-binary-content-as-Blob/

$。ajax不支持arraybuffer或blob作为其dataType。因此，我们需要编写一个beforeSend处理程序：

//setup ajax
$.ajaxSetup({
  beforeSend:function(jqXHR,settings){
    if (settings.dataType === 'binary'){
      settings.xhr().responseType='arraybuffer';
      settings.processData=false;
    }
  }
})

//use ajax now
$.ajax({
  url:url,
  dataType:"binary",
  success:function(data){
    console.log(data); //ArrayBuffer
    console.log(new Blob([data])) // Blob
  }
})

但从未成功。也许更聪明的人可以找出jQuery方法：）

如何使用ajax和TCPDF下载pdf

2 个答案: