在服务器上存储生成的 PDF 文件

Question

使用 jsPDF 插件，我正在创建一个 .pdf 文件并根据按钮点击生成下载。我想将文件保存到我的服务器上而不是开始下载。因此，当单击按钮时，我希望将文件保存在：

/tmp/uploads/pdf/example.pdf

我知道我需要使用 Jquery.Ajax 来 post 将文件发送到服务器。但是，查看文档，我没有看到对 .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 document saving 示例，我尝试了以下操作：

var pdfDocument = doc.save( tbl+".pdf");
        var pdfRequest = $.ajax({
              url: "/tmp/uploads/pdf",
              processData: false,
              data: pdfDocument
            });

这会下载文件而不是保存文件。如何保存文件？

Answer 1

我设法使用 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 数据的地方。

Answer 2

如果您的 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 数组

<?php
if(!empty($_FILES['data'])) {
    // PDF is located at $_FILES['data']['tmp_name']
    // rename(...) it or send via email etc.
    $content = file_get_contents($_FILES['data']['tmp_name']);
} else {
    throw new Exception("no data");
}
?>

Answer 3

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);
    }

Answer 4

使用 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 文件。稍后我使用路径中的文件。

Answer 5

我已成功使用 jspdf、javascript 和 php 将 jspdf 文件保存在服务器中并使用 png 图像

这里是 javascript

var doc = btoa(pdf.output());
var data = new FormData();
data.append("data", doc);
var xhr = new XMLHttpRequest();
xhr.open( 'post', 'data/test.php?name=' +name, true );
alert(data);
xhr.send(data);

和 php 文件

if(!empty($_POST['data'])){ 
 $data = base64_decode($_POST['data']);
 //$data = $_POST['data'];
$name = $_GET['name'];
 $fname = $name."_bell_quote.pdf"; // name the file
 $file = fopen("../quote/" .$fname, 'w'); // open the file path
 fwrite($file, $data); //save data
 fclose($file);
 echo "Bell Quote saved";   
}
else {
 echo "No Data Sent";
}

在服务器上存储生成的 PDF 文件

Storing generated PDF files on the server

jquery

ajax

pdf

jspdf