logo标签列表

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

jqueryajaxpdfjspdf
14

使用 jsPDF 插件，我正在创建一个 .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
            });

这个操作下载了文件而不是保存它。 我该怎么保存文件？

5个回答
21

如果您的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");
}
?>
11

我使用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();
});

上传.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数据。

你有没有想过为什么我从Javascript发送POST 'data'变量时，在PHP中获取到的文件内容与我发送的不同？ 在发送之前，我已经通过alert()方法确认了数据。接下来，在PHP中使用echo语句显示$_POST['data']。然后我再次使用alert()方法显示xmlHttp.responseText，但是我得到了一些其他的内容（不是“freak”字符，只有常规字符和更短的内容）。 - arrowman
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);
    }
1

使用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文件在服务器上。稍后我可以使用路径中的文件。

1
我已经成功地使用 jspdf、javascript 和 php 以及 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";
}
谢谢，它起作用了！但是我该如何将文件名更改为随机名称，而不是表单fname？ - jQuery-Student1989
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接