Question

使用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 document saving示例，我尝试了以下内容：

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

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

Answer 1

如果您的PDF包含二进制数据，如果您尝试通过字符串传输PDF，则可能会遇到问题。我成功地使用了jsPDF的blob输出格式。

 public getLanguages() {
       return this._languageService
            .getLanguages()
            .subscribe(
                languages => this.languages= languages,
                error =>  this.errorMessage = <any>error);

    }

然后，您的upload.php可以使用PHP中的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);数组

$_FILES

Answer 2

我设法使用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";
}

要获取原始pdf数据的关键部分是var pdf =doc.output();。

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

我不带任何querystring参数的情况下调用了该页面，该页面创建了图（未提供用于绘制图的代码，因为它不是qs的一部分），然后调用createPDF（）函数，该函数导致重新加载页面并将图形另存为pdf文件在服务器上。后来我使用路径中的文件。

Answer 5

我已经使用jspdf，javascript和php以及png图像成功地将jspdf文件保存在服务器中

这是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文件

5 个答案: