另存为PDF：建议使用服务器解决方案从客户端接收原始数据并将PDF发送回客户端吗？

Question

My project requires me to add a "SaveAs PDF" feature. I was looking for a pure JavaScript solution which does this just in client end, however, was told that it's not implementable, at least for now.

jsPDF currently is still a limited version, not support graph and others. So now I am looking for a stable open-srouce free solution to set up a server web service, that receive data from client-end and send back the produced PDF file or a link for user to save to their disk.

The data from client is determined by client user, which means, not the whole page. User can choose to save a map, a table, or all of them into PDF file.

Any recommendations?

PS: in Windows environment

Answer 1

You might check out the ReportLab Toolkit - it includes an Open Source Python library for creating PDFs. (You didn't specify what server-side language you wanted, but Python is pretty widely supported.)

If you need something that can be coded in Javascript, one option might be PhantomJS . This tool allows you to run a headless Webkit browser from the command line, and among other things it can render and save webpages as PDFs. Slippy uses this approach, so you might be able to get example code from that project. Scripting the PDF creation would probably be much faster in PhantomJS than in Python, but it's likely to be much slower (it has to fire up a Webkit instance) and server installation might be complicated.

Answer 2

I've create this function in javascript which send on iframe to the server:

function download(url, datas){
    if(url && datas){ 
        var inputs = '', value,
            iframe = '<iframe name="iframeDownload" id="iframeDownload" width=0 height=0></iframe>';

        $(iframe).appendTo('body');

        datas.forEach(function(data){ 
            name = encodeURI(data.get('name'));
            value = encodeURI(data.get('value'));

            inputs+='<input name="'+name+'" value="'+value+'"/>'; 
        });

        $('<form action="'+url+'" method="post" target="iframeDownload">'+inputs+'</form>').appendTo('body').submit().remove(); // .appendTo and remove() are needed for firefox

        $(iframe).remove();
    };
};

I'm encoding the input name and value to be able to send data. On my server, I'm using php, so to decode this, you need: rawurldecode. If you define the name of the inputs as "fileName" and "file" you can write this:

$fileName = rawurldecode($_POST['fileName']);
$file = rawurldecode($_POST['file']);

After than, to force the download, you need to send the corrects header. I'm using this function:

function download($filename, $file) {
    header('Content-disposition: attachment; filename="'.$filename.'"');
    header('Content-Type: application/force-download');
    header('Content-Length: '. filesize($file));
    readfile($file);
}

If you don't need to send the file from javascript because it's created on the server side, just add the path of your file to the download function.

---

If you're using PHP, You can use fpdf to generate the pdf.