web-dev-qa-db-fra.com

Stockage généré PDF fichiers sur le serveur

À l’aide du plugin jsPDF, je crée un fichier .pdf et génère un téléchargement basé sur un clic de bouton. Je souhaite enregistrer le fichier sur mon serveur au lieu de lancer le téléchargement. Donc, quand le bouton est cliqué, j'aimerais que le fichier soit enregistré dans:

/tmp/uploads/pdf/example.pdf

Je sais que je dois utiliser Jquery.Ajax pour publier le fichier sur le serveur. Cependant, en regardant la documentation et je ne voyais aucune prise en charge pour .pdf en tant que type de données.

Mon code: 

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

Sur la base de cette sauvegarde de document xml exemple, j’ai essayé ce qui suit:

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

Cela a téléchargé le fichier au lieu de le sauvegarder. Comment puis-je sauvegarder le fichier?

jqueryajaxpdfjspdf
8
b0w3rb0w3r

J'ai réussi à résoudre ce problème en utilisant FormData(), voici comment je l'ai fait:

$(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";
}

La partie clé étant var pdf =doc.output(); où vous voulez obtenir les données pdf brutes.

9
b0w3rb0w3r

Si votre PDF contient des données binaires, des problèmes peuvent survenir si vous essayez de transférer le PDF via une chaîne. J'ai utilisé avec succès le format de sortie blob de jsPDF.

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

Votre upload.php peut alors utiliser le tableau $_FILES en PHP

<?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");
}
?>
10
Nico

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
mahmoud hemdan

Utilisation de Asp.net/C# et de jQuery : Basé sur @mahmoud hemdan answer, je l’ai fait pour mon besoin. J'ai aimé ci-dessous:

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

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

J'ai appelé la page sans aucun paramètre de chaîne de requête et la page crée le graphe (code non donné pour dessiner le graphe car il ne fait pas partie du qs.) le graphique sous forme de fichier pdf sur le serveur. Plus tard, j'utilise le fichier du chemin.

0
Nitin