在服务器上存储生成的PDF文件
使用jsPDF插件，我正在创建一个.pdf文件，并根据按钮点击生成下载。 我想将文件保存到我的服务器而不是启动下载。 因此，当单击按钮时，我希望将文件保存在：
/tmp/uploads/pdf/example.pdf
我知道我需要使用Jquery.Ajax将文件发布到服务器。 但是，查看文档，我没有看到任何支持.pdf作为数据类型。
我的代码：
$(document).on("click", "#PDF", function () { var table = document.getElementById("result"); var tbl = window.sessionStorage.getItem("tbl"); var cols = [], data = []; function html() { var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(table, true); doc.autoTable(res.columns, res.data); doc.save( tbl+".pdf"); } html(); });
基于此xml文档保存示例，我尝试了以下操作：
var pdfDocument = doc.save( tbl+".pdf"); var pdfRequest = $.ajax({ url: "/tmp/uploads/pdf", processData: false, data: pdfDocument });
这下载了文件而不是保存它。 我该如何保存文件？
我设法使用FormData()修复此问题，这是我如何做到的：
$(document).on("click", "#PDF", function () { var table = document.getElementById("result"); var cols = [], data = []; function html() { var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(table, true); doc.autoTable(res.columns, res.data); var pdf =doc.output(); //returns raw body of resulting PDF returned as a string as per the plugin documentation. var data = new FormData(); data.append("data" , pdf); var xhr = new XMLHttpRequest(); xhr.open( 'post', 'upload.php', true ); //Post to php Script to save to server xhr.send(data); } html(); });
upload.php的
if(!empty($_POST['data'])){ $data = $_POST['data']; $fname = "test.pdf"; // name the file $file = fopen("testa/pdf/" .$fname, 'w'); // open the file path fwrite($file, $data); //save data fclose($file); } else { echo "No Data Sent"; }
关键部分是var pdf =doc.output(); 您想要获取原始pdf数据的位置。
如果您的PDF包含二进制数据，如果您尝试通过字符串传输PDF，则可能会遇到问题。 我成功地使用了jsPDF的blob输出格式。
var doc = new jsPDF(); // ... generate pdf here ... // output as blob var pdf = doc.output('blob'); var data = new FormData(); data.append('data' , pdf); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4) { if (this.status !== 200) { // handle error } } } xhr.open('POST', 'upload.php', true); xhr.send(data);
然后，您的upload.php可以在PHP中使用$_FILES数组
JavaScript的
doc = new jsPDF({ unit: 'px', format: 'a4' }); doc.addImage(img, 'JPEG', 20, 20); var data = {}; var base64pdf = btoa(doc.output()); $.ajax({ url: 'WS/FileUploadHandler.ashx', type: 'post', async: false, contentType: 'application/json; charset=utf-8', data: base64pdf, dataType: 'json' });
FileUploadHandler.ashx
public void ProcessRequest(HttpContext context) { var jsonString = String.Empty; context.Request.InputStream.Position = 0; using (var inputStream = new StreamReader(context.Request.InputStream)) { jsonString = inputStream.ReadToEnd(); } var byteArray = Convert.FromBase64String(jsonString); File.WriteAllBytes(@"C:\Users\mahmoud.hemdan\Downloads\testtest.pdf", byteArray); }
使用Asp.net/C#和jQuery ：基于@mahmoud hemdan回答，我的确满足了我的要求。 我在下面做了：
使用Javascript：
function createPDF(){ var doc = new jsPDF('landscape'); var u = $("#myCanvas").toDataURL("image/png", 1.0); doc.addImage(u, 'JPEG', 20, 20, 250, 150); var base64pdf = btoa(doc.output()); $.ajax({ url: 'ChartPDF.aspx?pdfinput=1', type: 'post', async: false, contentType: 'application/json; charset=utf-8', data: base64pdf, dataType: 'json' }); }
ChartPDF.aspx.cs代码：
protected void Page_Load(object sender, EventArgs e) { var pdfinput= Request.QueryString["pdfinput"]; if (pdfinput!= null) { var jsonString = string.Empty; HttpContext.Current.Request.InputStream.Position = 0; using (var inputStream = new StreamReader(Request.InputStream)) { jsonString = inputStream.ReadToEnd(); } var byteArray = Convert.FromBase64String(jsonString); //Get your desired path for saving file File.WriteAllBytes(@"C:\ReportPDFs\Test.pdf", byteArray); } }
我调用了没有任何查询字符串参数的页面，页面创建了图形（没有给出绘制图形的代码，因为它不是qs的一部分。）之后它调用createPDF（）函数，导致重新加载页面并保存图表为服务器上的pdf文件。 后来我使用路径中的文件。